From 2eb7d428cb2d4dbfe8aa3f163f0a7c614b37e3bf Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Sun, 16 Aug 2026 04:38:33 +0200
Subject: [PATCH 01/32] refactor(website): baseline setup


From 9f090bacca598675449f9c573139bae929c98e55 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Sun, 16 Aug 2026 22:56:12 +0200
Subject: [PATCH 02/32] refactor(website): update design system integration and
 theme variables

---
 .../BlogPage/BlogCommentSection.tsx           |   8 +-
 .../src/components/BlogPage/BlogNavList.tsx   |   8 +-
 .../src/components/BlogPage/RelatedPosts.tsx  |   8 +-
 .../CMSLandingPage/ComingSoonSection.tsx      |   4 +-
 .../CMSLandingPage/ContentDeliverySection.tsx |   6 +-
 .../CMSLandingPage/FeaturesSection.tsx        |   4 +-
 .../CMSLandingPage/FinalCTASection.tsx        |   4 +-
 .../components/CMSLandingPage/HeroSection.tsx |   4 +-
 .../src/components/ChatBot/ChatBumble.tsx     |   2 +-
 .../Editor/LongPressMessage/index.tsx         |   2 +-
 .../src/components/DocPage/DocNavList.tsx     |   8 +-
 .../DocPageNavigation/DocPageNavigation.tsx   |   4 +-
 .../DocPage/DocumentationRender.tsx           |  31 +-
 .../DocPage/FrameworkFilter/index.tsx         |   2 +-
 .../src/components/DocPage/History/index.tsx  |   4 +-
 .../DocPage/NavTitles/NavTitles.tsx           |   6 +-
 .../LandingPage/AuditSection/index.tsx        |   2 +-
 .../FeaturesSection/FrameworkSelector.tsx     |   2 +-
 .../LandingPage/FeaturesSection/index.tsx     |   2 +-
 .../LandingPage/HeroSection/TechLogos.tsx     |   2 +-
 .../LandingPage/HeroSection/index.tsx         |  86 +++---
 .../ProductsSection/ProductSectionLayout.tsx  |   2 +-
 .../ProductsSection/TMSSection/index.tsx      |   4 +-
 .../TranslateSection/index.tsx                |   4 +-
 .../src/components/LandingPage/index.tsx      | 137 ++++-----
 .../LocaleSwitcher/LocaleSwitcher.tsx         |   2 +-
 apps/website/src/components/Navbar/index.tsx  |  10 +-
 .../src/components/NotFoundComponent.tsx      |   6 +-
 .../Analyzer/Results/AnalyzerSiteResults.tsx  |   4 +-
 .../Analyzer/Results/BundleContentField.tsx   |  20 +-
 .../Analyzer/Results/FieldItem.tsx            |   2 +-
 .../Analyzer/Results/RobotsSection.tsx        |   2 +-
 .../Analyzer/Results/SitemapSection.tsx       |   2 +-
 .../ScannerPage/AnalyzerResultsSection.tsx    |   2 +-
 .../ScannerPage/RecursiveAuditResults.tsx     |  10 +-
 .../ScannerPage/UrlDiscoveryList.tsx          |   6 +-
 .../TMSLandingPage/ComparisonSection.tsx      |  10 +-
 .../TMSLandingPage/FeaturesSection.tsx        |   6 +-
 .../TMSLandingPage/FinalCTASection.tsx        |   4 +-
 .../components/TMSLandingPage/HeroSection.tsx |   4 +-
 .../TMSLandingPage/PainPointsSection.tsx      |   6 +-
 .../TranslationLandingPage/CTASection.tsx     |  13 +-
 .../CommandsSection.tsx                       |  20 +-
 .../TranslationLandingPage/HeroSection.tsx    |  34 +--
 .../HowItWorksSection.tsx                     |   6 +-
 .../KeyPointsSection.tsx                      |  12 +-
 .../LocalVsServerSection.tsx                  |  26 +-
 .../ProvidersCarousel.tsx                     |   8 +-
 apps/website/src/globals.css                  |  41 ++-
 .../routes/{-$locale}/i18n-seo-scanner.tsx    |   2 +-
 apps/website/src/routes/{-$locale}/index.tsx  |   2 +-
 .../design-system/.storybook/preview.tsx      |   4 +-
 packages/@intlayer/design-system/package.json |   8 +-
 .../src/components/Avatar/index.tsx           |   2 +-
 .../src/components/Badge/index.tsx            |   4 +-
 .../src/components/Breadcrumb/index.tsx       |   4 +-
 .../src/components/Browser/Browser.tsx        |   2 +-
 .../src/components/Button/Button.tsx          |  29 +-
 .../CollapsibleTable/CollapsibleTable.tsx     |  10 +-
 .../src/components/Container/index.tsx        | 167 +++++------
 .../DictionaryEditor/ItemLayout.tsx           |   2 +-
 .../DictionaryFieldEditor/ContentEditor.tsx   |   4 +-
 .../DictionaryDetailsForm.tsx                 |   4 +-
 .../VersionSwitcher.tsx                       |   2 +-
 .../src/components/Footer/index.tsx           |   2 +-
 .../src/components/Input/Checkbox.tsx         |   6 +-
 .../src/components/Input/Input.tsx            |   2 +-
 .../src/components/Input/OTPInput.tsx         |   2 +-
 .../KeyboardShortcut/KeyboardShortcut.tsx     |   4 +-
 .../src/components/Link/Link.tsx              |  14 +-
 .../LocaleSwitcherContent.tsx                 |   4 +-
 .../MarkDownRender/MarkDownIframe.tsx         |   2 +-
 .../MarkDownRender/MarkDownRender.tsx         |  14 +-
 .../MarkdownEditor/MarkdownEditor.tsx         |   4 +-
 .../MarkdownEditor/generative/AISelector.tsx  |   2 +-
 .../generative/AISelectorCommands.tsx         |   4 +-
 .../generative/GenerativeMenuSwitch.tsx       |   4 +-
 .../MarkdownEditor/markdown-editor.css        |  32 +--
 .../src/components/Navbar/MobileNavbar.tsx    |   2 +-
 .../RightDrawer/RightDrawer.stories.tsx       |  10 +-
 .../components/RightDrawer/RightDrawer.tsx    |   2 +-
 .../src/components/Select/Multiselect.tsx     |   4 +-
 .../src/components/Select/Select.tsx          |   4 +-
 .../src/components/Steps/index.tsx            |   6 +-
 .../SwitchSelector/SwitchSelector.tsx         |  12 +-
 .../SwitchSelector/VerticalSwitchSelector.tsx |  12 +-
 .../design-system/src/components/Tab/Tab.tsx  |   2 +-
 .../components/TabSelector/TabSelector.tsx    |  10 +-
 .../src/components/Table/TableElements.tsx    |  10 +-
 .../src/components/Tag/index.tsx              |   2 +-
 .../src/components/Terminal/Terminal.tsx      |   2 +-
 .../src/components/Toaster/Toast.tsx          |   8 +-
 .../@intlayer/design-system/styles/fonts.css  |   7 +
 .../design-system/styles/globals.css          |  64 +++++
 .../@intlayer/design-system/styles/themes.css |  91 ++++++
 packages/@intlayer/design-system/tailwind.css | 269 ------------------
 96 files changed, 721 insertions(+), 740 deletions(-)
 create mode 100644 packages/@intlayer/design-system/styles/fonts.css
 create mode 100644 packages/@intlayer/design-system/styles/globals.css
 create mode 100644 packages/@intlayer/design-system/styles/themes.css
 delete mode 100644 packages/@intlayer/design-system/tailwind.css

diff --git a/apps/website/src/components/BlogPage/BlogCommentSection.tsx b/apps/website/src/components/BlogPage/BlogCommentSection.tsx
index ccd810a527..0778abd315 100644
--- a/apps/website/src/components/BlogPage/BlogCommentSection.tsx
+++ b/apps/website/src/components/BlogPage/BlogCommentSection.tsx
@@ -196,7 +196,9 @@ export const BlogCommentSection: FC<BlogCommentSectionProps> = ({
 
   return (
     <section className="mt-12 border-border border-t pt-10">
-      <h3 className="mb-6 font-medium text-lg text-text">{content.comments}</h3>
+      <h3 className="mb-6 font-medium text-foreground text-lg">
+        {content.comments}
+      </h3>
 
       {/* Approved comments list */}
       {comments.length === 0 && submitState !== 'success' ? (
@@ -216,7 +218,7 @@ export const BlogCommentSection: FC<BlogCommentSectionProps> = ({
                 gap="sm"
               >
                 <div className="flex items-center justify-between">
-                  <span className="font-medium text-sm text-text">
+                  <span className="font-medium text-foreground text-sm">
                     {comment.authorName}
                   </span>
                   <time
@@ -226,7 +228,7 @@ export const BlogCommentSection: FC<BlogCommentSectionProps> = ({
                     {formatDate(comment.createdAt)}
                   </time>
                 </div>
-                <p className="whitespace-pre-wrap text-sm text-text-secondary">
+                <p className="whitespace-pre-wrap text-foreground-secondary text-sm">
                   {comment.content}
                 </p>
               </Container>
diff --git a/apps/website/src/components/BlogPage/BlogNavList.tsx b/apps/website/src/components/BlogPage/BlogNavList.tsx
index a405b933c8..d1e28bc441 100644
--- a/apps/website/src/components/BlogPage/BlogNavList.tsx
+++ b/apps/website/src/components/BlogPage/BlogNavList.tsx
@@ -123,7 +123,7 @@ export const BlogNavListContent: FC<BlogNavListProps> = ({
                               label={key2}
                               to={sectionDefault?.relativeUrl ?? ''}
                               isActive={isSelfActive && !isSubSectionActive}
-                              className="block w-full flex-row items-center text-nowrap p-2 text-left text-sm transition-colors hover:text-text"
+                              className="block w-full flex-row items-center text-nowrap p-2 text-left text-sm transition-colors hover:text-foreground"
                             >
                               {section2Data?.title}
                             </OptionalLink>
@@ -136,7 +136,7 @@ export const BlogNavListContent: FC<BlogNavListProps> = ({
                           <div className="pl-3 text-sm">
                             {subSections2 &&
                               Object.keys(subSections2).length > 0 && (
-                                <div className="flex flex-col items-start gap-2 p-1 text-neutral transition-colors hover:text-text">
+                                <div className="flex flex-col items-start gap-2 p-1 text-neutral transition-colors hover:text-foreground">
                                   {Object.keys(subSections2).map((key3) => {
                                     const section3Data = subSections2[key3];
                                     const slugs =
@@ -157,7 +157,7 @@ export const BlogNavListContent: FC<BlogNavListProps> = ({
                                           ''
                                         }
                                         isActive={isActive}
-                                        className="block w-full flex-row items-center text-nowrap p-2 text-left text-xs transition-colors hover:text-text"
+                                        className="block w-full flex-row items-center text-nowrap p-2 text-left text-xs transition-colors hover:text-foreground"
                                       >
                                         {section3Data.title}
                                       </OptionalLink>
@@ -170,7 +170,7 @@ export const BlogNavListContent: FC<BlogNavListProps> = ({
                       ) : (
                         <OptionalLink
                           to={sectionDefault?.relativeUrl ?? ''}
-                          className="block w-full flex-row items-center text-nowrap p-2 text-left text-sm transition-colors hover:text-text"
+                          className="block w-full flex-row items-center text-nowrap p-2 text-left text-sm transition-colors hover:text-foreground"
                           label={key2}
                           isActive={isActive}
                         >
diff --git a/apps/website/src/components/BlogPage/RelatedPosts.tsx b/apps/website/src/components/BlogPage/RelatedPosts.tsx
index 1363f38f2a..d49f90e93e 100644
--- a/apps/website/src/components/BlogPage/RelatedPosts.tsx
+++ b/apps/website/src/components/BlogPage/RelatedPosts.tsx
@@ -81,7 +81,7 @@ export const RelatedPosts: FC<RelatedPostsProps> = ({
 
   return (
     <section className="mt-16 border-border border-t border-dashed pt-8">
-      <h2 className="mb-4 font-semibold text-sm text-text">
+      <h2 className="mb-4 font-semibold text-foreground text-sm">
         {content.relatedPosts}
       </h2>
       <div className="grid grid-cols-1 divide-dashed divide-border sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4">
@@ -93,7 +93,7 @@ export const RelatedPosts: FC<RelatedPostsProps> = ({
               label={content.visitBlogTitle({ title: post.title })}
               className="group flex flex-col gap-2.5 py-5 no-underline sm:px-5 last:sm:pr-0 first:sm:pl-0"
             >
-              <p className="line-clamp-2 font-medium text-sm text-text-primary transition-colors group-hover:text-text-secondary group-hover:underline">
+              <p className="line-clamp-2 font-medium text-foreground-primary text-sm transition-colors group-hover:text-foreground-secondary group-hover:underline">
                 {post.title}
               </p>
               {post.description && (
@@ -149,7 +149,7 @@ export const LastPosts: FC<LastPostsProps> = ({
 
   return (
     <section className="mt-16 border-border border-t border-dashed pt-8">
-      <h2 className="mb-4 font-semibold text-sm text-text">
+      <h2 className="mb-4 font-semibold text-foreground text-sm">
         {content.lastPosts}
       </h2>
       <div className="grid grid-cols-1 divide-dashed divide-border sm:grid-cols-2 sm:divide-x sm:divide-y-0 lg:grid-cols-4">
@@ -161,7 +161,7 @@ export const LastPosts: FC<LastPostsProps> = ({
               label={content.visitBlogTitle({ title: post.title })}
               className="group flex flex-col gap-2.5 py-5 no-underline sm:px-5 last:sm:pr-0 first:sm:pl-0"
             >
-              <p className="line-clamp-2 font-medium text-sm text-text-primary transition-colors group-hover:text-text-secondary group-hover:underline">
+              <p className="line-clamp-2 font-medium text-foreground-primary text-sm transition-colors group-hover:text-foreground-secondary group-hover:underline">
                 {post.title}
               </p>
               {post.description && (
diff --git a/apps/website/src/components/CMSLandingPage/ComingSoonSection.tsx b/apps/website/src/components/CMSLandingPage/ComingSoonSection.tsx
index 8a7c8a4795..42fe920a87 100644
--- a/apps/website/src/components/CMSLandingPage/ComingSoonSection.tsx
+++ b/apps/website/src/components/CMSLandingPage/ComingSoonSection.tsx
@@ -17,7 +17,7 @@ export const ComingSoonSection: FC = () => {
   return (
     <section className="py-24">
       <div className="mx-auto max-w-7xl px-4 md:px-8 lg:px-12">
-        <h2 className="mb-16 text-center font-bold text-3xl text-text sm:text-4xl">
+        <h2 className="mb-16 text-center font-bold text-3xl text-foreground sm:text-4xl">
           {comingSoonTitle}
         </h2>
 
@@ -32,7 +32,7 @@ export const ComingSoonSection: FC = () => {
                   {iconMap[feature.icon.value]}
                 </span>
                 <div>
-                  <h3 className="mb-2 flex items-center justify-center gap-2 font-semibold text-lg text-text">
+                  <h3 className="mb-2 flex items-center justify-center gap-2 font-semibold text-foreground text-lg">
                     {feature.title}
                     {feature.badge && (
                       <span className="inline-flex items-center rounded-full bg-secondary/10 px-2 py-0.5 font-medium text-secondary text-xs">
diff --git a/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx b/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
index f923ea4353..5af7f499a0 100644
--- a/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
+++ b/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
@@ -72,7 +72,7 @@ export const ContentDeliverySection: FC = () => {
           variants={headerVariants}
           className="mb-16 text-center"
         >
-          <h2 className="mb-4 font-bold text-3xl text-text sm:text-4xl">
+          <h2 className="mb-4 font-bold text-3xl text-foreground sm:text-4xl">
             {deliveryTitle}
           </h2>
           <p className="mx-auto max-w-2xl text-lg text-neutral">
@@ -108,11 +108,11 @@ export const ContentDeliverySection: FC = () => {
                 </Tag>
               )}
 
-              <div className="mb-5 flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-text">
+              <div className="mb-5 flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-foreground">
                 {iconMap[mode.icon.value] ?? <Zap className="size-6" />}
               </div>
 
-              <h3 className="mb-3 font-semibold text-text text-xl">
+              <h3 className="mb-3 font-semibold text-foreground text-xl">
                 {mode.title}
               </h3>
 
diff --git a/apps/website/src/components/CMSLandingPage/FeaturesSection.tsx b/apps/website/src/components/CMSLandingPage/FeaturesSection.tsx
index ad4b35ca4c..d29f2591f3 100644
--- a/apps/website/src/components/CMSLandingPage/FeaturesSection.tsx
+++ b/apps/website/src/components/CMSLandingPage/FeaturesSection.tsx
@@ -25,7 +25,7 @@ export const FeaturesSection: FC = () => {
   return (
     <section className="py-24">
       <div className="mx-auto max-w-7xl px-4 md:px-8 lg:px-12">
-        <h2 className="mb-16 text-center font-bold text-3xl text-text sm:text-4xl">
+        <h2 className="mb-16 text-center font-bold text-3xl text-foreground sm:text-4xl">
           {featuresTitle}
         </h2>
 
@@ -39,7 +39,7 @@ export const FeaturesSection: FC = () => {
                 {iconMap[feature.icon.value]}
               </span>
               <div>
-                <h3 className="mb-2 flex items-center justify-center gap-2 font-semibold text-lg text-text">
+                <h3 className="mb-2 flex items-center justify-center gap-2 font-semibold text-foreground text-lg">
                   {feature.title}
                   {feature.badge && (
                     <span className="inline-flex items-center rounded-full bg-secondary/10 px-2 py-0.5 font-medium text-secondary text-xs">
diff --git a/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx b/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
index b2823eaaf2..b344b579ae 100644
--- a/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
+++ b/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
@@ -27,7 +27,7 @@ export const FinalCTASection: FC = () => {
 
       <div className="relative mx-auto max-w-4xl px-4 text-center md:px-8 lg:px-12">
         <motion.div {...fadeUp}>
-          <h2 className="mb-6 font-bold text-3xl text-text-opposite sm:text-4xl md:text-5xl">
+          <h2 className="mb-6 font-bold text-3xl text-foreground-opposite sm:text-4xl md:text-5xl">
             {finalCtaTitle}
           </h2>
           <p className="mx-auto mb-10 max-w-xl text-lg text-neutral">
@@ -59,7 +59,7 @@ export const FinalCTASection: FC = () => {
               roundedSize="full"
               className="flex flex-row items-center justify-center gap-2"
             >
-              <span className="flex flex-row flex-nowrap items-center gap-2 text-sm text-text sm:text-lg">
+              <span className="flex flex-row flex-nowrap items-center gap-2 text-foreground text-sm sm:text-lg">
                 {finalCtaPrimary}
                 <ArrowRight className="size-5 transition-transform" />
               </span>
diff --git a/apps/website/src/components/CMSLandingPage/HeroSection.tsx b/apps/website/src/components/CMSLandingPage/HeroSection.tsx
index 8313e51322..84c981fc0a 100644
--- a/apps/website/src/components/CMSLandingPage/HeroSection.tsx
+++ b/apps/website/src/components/CMSLandingPage/HeroSection.tsx
@@ -93,7 +93,7 @@ export const HeroSection: FC = () => {
               initial={{ opacity: 0, y: 40, filter: 'blur(10px)' }}
               animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
               transition={{ duration: 0.7, ease: 'easeOut' }}
-              className="mb-6 font-extrabold text-5xl text-text leading-[1.1] sm:text-6xl md:text-7xl"
+              className="mb-6 font-extrabold text-5xl text-foreground leading-[1.1] sm:text-6xl md:text-7xl"
             >
               {heroTitle}
             </m.h1>
@@ -156,7 +156,7 @@ export const HeroSection: FC = () => {
 
         {/* Screenshot Preview */}
 
-        {/* 3D WRAPPER 
+        {/* 3D WRAPPER
         We add a wrapper div here to establish the "perspective".
         'perspective-[1200px]' is a Tailwind arbitrary value (or standard CSS perspective: 1200px).
         This creates the "vanishing point".
diff --git a/apps/website/src/components/ChatBot/ChatBumble.tsx b/apps/website/src/components/ChatBot/ChatBumble.tsx
index 32a7330ae5..6130b104ec 100644
--- a/apps/website/src/components/ChatBot/ChatBumble.tsx
+++ b/apps/website/src/components/ChatBot/ChatBumble.tsx
@@ -21,7 +21,7 @@ export const ChatBumble: FC<ChatBumbleProps> = ({
     <div
       className={cn(
         type === ChatBumbleType.QUESTION &&
-          'mr-4 ml-auto w-auto max-w-[90%] whitespace-pre-wrap rounded-xl rounded-tr-none bg-text/95 px-8 py-2 text-text-opposite',
+          'mr-4 ml-auto w-auto max-w-[90%] whitespace-pre-wrap rounded-xl rounded-tr-none bg-text/95 px-8 py-2 text-foreground-opposite',
         type === ChatBumbleType.ANSWER && 'w-full px-4'
       )}
       {...props}
diff --git a/apps/website/src/components/Dashboard/Editor/LongPressMessage/index.tsx b/apps/website/src/components/Dashboard/Editor/LongPressMessage/index.tsx
index e8875d6f06..bb2661a7e1 100644
--- a/apps/website/src/components/Dashboard/Editor/LongPressMessage/index.tsx
+++ b/apps/website/src/components/Dashboard/Editor/LongPressMessage/index.tsx
@@ -17,7 +17,7 @@ export const LongPressMessage: FC = () => {
   return (
     <div
       className={cn(
-        'rounded-2xl bg-neutral/30 px-3 py-1 font-bold text-sm text-text transition-opacity duration-100',
+        'rounded-2xl bg-neutral/30 px-3 py-1 font-bold text-foreground text-sm transition-opacity duration-100',
         hoveredContent?.dictionaryKey ? 'opacity-100' : 'opacity-0'
       )}
     >
diff --git a/apps/website/src/components/DocPage/DocNavList.tsx b/apps/website/src/components/DocPage/DocNavList.tsx
index f7bce26183..16792b9bbc 100644
--- a/apps/website/src/components/DocPage/DocNavList.tsx
+++ b/apps/website/src/components/DocPage/DocNavList.tsx
@@ -337,7 +337,7 @@ export const DocNavListContent: FC<DocNavListContentProps> = ({
                               label={key2}
                               to={sectionDefault?.relativeUrl ?? ''}
                               isActive={isSelfActive && !isSubSectionActive}
-                              className="block w-full flex-row items-center text-nowrap p-2 text-left text-sm transition-colors hover:text-text"
+                              className="block w-full flex-row items-center text-nowrap p-2 text-left text-sm transition-colors hover:text-foreground"
                               frameworks={section2Data?.frameworks}
                             >
                               {section2Data?.title}
@@ -351,7 +351,7 @@ export const DocNavListContent: FC<DocNavListContentProps> = ({
                           <div className="pl-3 text-sm">
                             {subSections2 &&
                               Object.keys(subSections2).length > 0 && (
-                                <div className="flex flex-col items-start gap-2 p-1 text-neutral transition-colors hover:text-text">
+                                <div className="flex flex-col items-start gap-2 p-1 text-neutral transition-colors hover:text-foreground">
                                   {Object.keys(subSections2).map((key3) => {
                                     const section3Data = subSections2[key3];
                                     const slugs =
@@ -372,7 +372,7 @@ export const DocNavListContent: FC<DocNavListContentProps> = ({
                                           ''
                                         }
                                         isActive={isActive}
-                                        className="block w-full flex-row items-center text-nowrap p-2 text-left text-xs transition-colors hover:text-text"
+                                        className="block w-full flex-row items-center text-nowrap p-2 text-left text-xs transition-colors hover:text-foreground"
                                         frameworks={section3Data.frameworks}
                                       >
                                         {section3Data.title}
@@ -386,7 +386,7 @@ export const DocNavListContent: FC<DocNavListContentProps> = ({
                       ) : (
                         <OptionalLink
                           to={sectionDefault?.relativeUrl ?? ''}
-                          className="block w-full flex-row items-center text-nowrap p-2 text-left text-sm transition-colors hover:text-text"
+                          className="block w-full flex-row items-center text-nowrap p-2 text-left text-sm transition-colors hover:text-foreground"
                           label={key2}
                           isActive={isActive}
                           frameworks={section2Data?.frameworks}
diff --git a/apps/website/src/components/DocPage/DocPageNavigation/DocPageNavigation.tsx b/apps/website/src/components/DocPage/DocPageNavigation/DocPageNavigation.tsx
index 3726cc2ceb..f3e173a828 100644
--- a/apps/website/src/components/DocPage/DocPageNavigation/DocPageNavigation.tsx
+++ b/apps/website/src/components/DocPage/DocPageNavigation/DocPageNavigation.tsx
@@ -31,7 +31,7 @@ export const DocPageNavigation: FC<DocPageNavigationProps> = ({
           className="wrap-break-words ml-auto flex h-auto w-full max-w-1/2 flex-1 flex-row items-center justify-start gap-2 whitespace-normal text-nowrap rounded-lg px-2 py-5"
         >
           <ChevronLeft className="size-5" />
-          <span className="text-text">{prevDoc?.title}</span>
+          <span className="text-foreground">{prevDoc?.title}</span>
         </Link>
       )}
       {nextDoc && (
@@ -42,7 +42,7 @@ export const DocPageNavigation: FC<DocPageNavigationProps> = ({
           color="neutral"
           className="wrap-break-words ml-auto flex h-auto w-full max-w-1/2 flex-1 flex-row items-center justify-end gap-2 whitespace-normal text-nowrap rounded-lg px-2 py-5"
         >
-          <span className="text-text">{nextDoc?.title}</span>
+          <span className="text-foreground">{nextDoc?.title}</span>
           <ChevronRight className="size-5" />
         </Link>
       )}
diff --git a/apps/website/src/components/DocPage/DocumentationRender.tsx b/apps/website/src/components/DocPage/DocumentationRender.tsx
index 2a81def8bd..526535bb67 100644
--- a/apps/website/src/components/DocPage/DocumentationRender.tsx
+++ b/apps/website/src/components/DocPage/DocumentationRender.tsx
@@ -23,6 +23,35 @@ const I18nBenchmark = lazy(() =>
   }))
 );
 
+const Accordion = ({ children, ...props }: AccordionProps) => (
+  <AccordionBase
+    {...props}
+    headerClassName="text-lg!"
+    contentClassName="divide-y divide-neutral"
+  >
+    <div className="mb-8 flex flex-col gap-6 px-4 pt-6 text-sm text-text/80">
+      {children}
+    </div>
+  </AccordionBase>
+);
+
+const AccordionGroup = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <Container
+    padding="sm"
+    roundedSize="2xl"
+    background="none"
+    border
+    borderColor="neutral"
+    className="flex flex-col gap-1 overflow-hidden"
+    {...props}
+  >
+    {children}
+  </Container>
+);
+
 type DocumentationRenderProps = {
   children: string | ParsedMarkdown;
   /**
@@ -43,7 +72,7 @@ export const DocumentationRender: FC<DocumentationRenderProps> = ({
   const { locale } = useLocale();
 
   return (
-    <div className="m-auto flex max-w-2xl flex-col gap-8 p-4 text-text/90 max-md:px-0">
+    <div className="m-auto flex max-w-2xl flex-col gap-8 p-4 text-foreground/90 max-md:px-0">
       {codeStyleSheet && (
         // biome-ignore lint/security/noDangerouslySetInnerHtml: generated by Shiki from a fixed pair of themes
         <style dangerouslySetInnerHTML={{ __html: codeStyleSheet }} />
diff --git a/apps/website/src/components/DocPage/FrameworkFilter/index.tsx b/apps/website/src/components/DocPage/FrameworkFilter/index.tsx
index a5dd65fd87..fbd956c5e0 100644
--- a/apps/website/src/components/DocPage/FrameworkFilter/index.tsx
+++ b/apps/website/src/components/DocPage/FrameworkFilter/index.tsx
@@ -163,7 +163,7 @@ const FrameworkFilterUI: FC<FrameworkFilterUIProps> = ({
                     {activeEntries.length > 2 ? (
                       <div className="flex items-end gap-1">
                         <Filter className="size-4" />
-                        <span className="text-text text-xs">
+                        <span className="text-foreground text-xs">
                           {activeEntries.length}
                         </span>
                       </div>
diff --git a/apps/website/src/components/DocPage/History/index.tsx b/apps/website/src/components/DocPage/History/index.tsx
index 2566a25e82..88463f498d 100644
--- a/apps/website/src/components/DocPage/History/index.tsx
+++ b/apps/website/src/components/DocPage/History/index.tsx
@@ -92,7 +92,7 @@ export const History: FC<HistoryProps> = ({
           transparency="xs"
           aria-label="Document history"
         >
-          <h4 className="mb-2 pb-4 font-medium text-sm text-text">
+          <h4 className="mb-2 pb-4 font-medium text-foreground text-sm">
             {versionHistory.title}
           </h4>
           <ol className="divide-y divide-dashed divide-text/20 overflow-y-auto p-1">
@@ -101,7 +101,7 @@ export const History: FC<HistoryProps> = ({
                 className="flex flex-row items-center justify-between gap-3 px-2 py-1 pr-1.5"
                 key={`${index}-${version}-${date}`}
               >
-                <span className="mt-1 text-text text-xs">{changes}</span>
+                <span className="mt-1 text-foreground text-xs">{changes}</span>
                 <div className="flex flex-col items-end justify-between gap-1 px-2 py-1 text-neutral text-sm">
                   <span className="text-nowrap">v{version}</span>
                   {date && (
diff --git a/apps/website/src/components/DocPage/NavTitles/NavTitles.tsx b/apps/website/src/components/DocPage/NavTitles/NavTitles.tsx
index 0f99f4e4de..5c5b63b586 100644
--- a/apps/website/src/components/DocPage/NavTitles/NavTitles.tsx
+++ b/apps/website/src/components/DocPage/NavTitles/NavTitles.tsx
@@ -22,7 +22,7 @@ const NavTitles2: FC<NavTitles2Props> = ({
   const { pathname } = useLocation();
 
   return (
-    <ul className="my-3 flex w-full min-w-52 flex-col gap-2 border-neutral border-l-[0.5px] pl-3 text-text/80">
+    <ul className="my-3 flex w-full min-w-52 flex-col gap-2 border-neutral border-l-[0.5px] pl-3 text-foreground/80">
       {title2.map((h3) => {
         const { id } = h3;
         const title = headingTexts.get(h3) ?? '';
@@ -37,7 +37,7 @@ const NavTitles2: FC<NavTitles2Props> = ({
               color="text"
               variant="invisible-link"
               roundedSize="lg"
-              className="flex text-wrap p-2 text-sm text-text/80 transition-[font-weight] duration-300 hover:font-semibold aria-[current]:bg-none aria-[current]:font-semibold aria-[current]:text-text"
+              className="flex text-wrap p-2 text-foreground/80 text-sm transition-[font-weight] duration-300 hover:font-semibold aria-[current]:bg-none aria-[current]:font-semibold aria-[current]:text-foreground"
               onClick={(e) => {
                 e.preventDefault();
                 const element = document.getElementById(id);
@@ -142,7 +142,7 @@ export const NavTitles: FC = () => {
                 roundedSize="lg"
                 variant="invisible-link"
                 aria-current={isActive ? 'location' : undefined}
-                className="flex text-wrap p-2 text-sm text-text/80 transition-[font-weight] duration-300 hover:font-semibold aria-[current]:bg-none aria-[current]:font-semibold aria-[current]:text-text"
+                className="flex text-wrap p-2 text-foreground/80 text-sm transition-[font-weight] duration-300 hover:font-semibold aria-[current]:bg-none aria-[current]:font-semibold aria-[current]:text-foreground"
                 onClick={(e) => {
                   e.preventDefault();
                   const element = document.getElementById(id);
diff --git a/apps/website/src/components/LandingPage/AuditSection/index.tsx b/apps/website/src/components/LandingPage/AuditSection/index.tsx
index 5a4c33ac4a..94795f8f1e 100644
--- a/apps/website/src/components/LandingPage/AuditSection/index.tsx
+++ b/apps/website/src/components/LandingPage/AuditSection/index.tsx
@@ -19,7 +19,7 @@ export const AuditSection: FC = () => {
 
   return (
     <section className="flex w-full flex-col gap-16 overflow-hidden px-20 py-20">
-      <h2 className="mx-auto max-w-3xl text-center font-bold text-3xl text-text leading-tight sm:text-5xl md:text-5xl lg:text-5xl">
+      <h2 className="mx-auto max-w-3xl text-center font-bold text-3xl text-foreground leading-tight sm:text-5xl md:text-5xl lg:text-5xl">
         {title}
       </h2>
       <p className="m-auto max-w-2xl text-center text-lg text-neutral leading-relaxed">
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx b/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
index 51f615d87f..7ca9698289 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
@@ -38,7 +38,7 @@ export const FrameworkSelector = ({ frameworks }: FrameworkSelectorProps) => {
         name={logo}
         className={cn(
           'size-4',
-          value === 'next' && 'text-text',
+          value === 'next' && 'text-foreground',
           framework !== value && 'opacity-60 grayscale-60'
         )}
       />
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/index.tsx b/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
index 9c90aabeb0..2971afe2f0 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
@@ -117,7 +117,7 @@ const Titles: FC<TitlesProps> = ({ sections, activeIndex, isMobile }) => (
     {sections.map((section, index) => (
       <motion.h3
         key={section.id.value}
-        className="absolute top-1/4 left-3 inline font-bold text-neutral text-xl leading-snug drop-shadow-sm aria-selected:text-text"
+        className="absolute top-1/4 left-3 inline font-bold text-neutral text-xl leading-snug drop-shadow-sm aria-selected:text-foreground"
         initial={getTitlePlacement(index, INITIAL_ACTIVE_INDEX, isMobile)}
         animate={getTitlePlacement(index, activeIndex, isMobile)}
         role="tab"
diff --git a/apps/website/src/components/LandingPage/HeroSection/TechLogos.tsx b/apps/website/src/components/LandingPage/HeroSection/TechLogos.tsx
index 28b8b1fd7a..e4cc6c0d19 100644
--- a/apps/website/src/components/LandingPage/HeroSection/TechLogos.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/TechLogos.tsx
@@ -115,7 +115,7 @@ const LogoItem: FC<{
     <TechLogo
       name={name}
       className={cn(
-        'size-12 shrink-0 opacity-70 transition-opacity duration-200 hover:opacity-100 sm:size-14 md:size-16 lg:size-18',
+        'size-12 shrink-0 opacity-70 transition-opacity duration-200 hover:opacity-100 md:size-10 lg:size-15',
         className
       )}
     />
diff --git a/apps/website/src/components/LandingPage/HeroSection/index.tsx b/apps/website/src/components/LandingPage/HeroSection/index.tsx
index 0c2110e072..7f927dcbef 100644
--- a/apps/website/src/components/LandingPage/HeroSection/index.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/index.tsx
@@ -8,7 +8,9 @@ import {
   Website_ReleasesV9_Path,
 } from '@intlayer/design-system/routes';
 import { Tag } from '@intlayer/design-system/tag';
-import { ArrowRight, Check, Copy } from 'lucide-react';
+import { motion } from 'framer-motion';
+import { ArrowRight, Check, Copy, Megaphone } from 'lucide-react';
+import { useTheme } from 'next-themes';
 import type { FC } from 'react';
 import { useIntlayer } from 'react-intlayer';
 import { Link } from '~/components/Link/Link';
@@ -34,32 +36,29 @@ export const HeroSection: FC = () => {
   const { isCopied, copy } = useCopyToClipboard('npx intlayer init');
 
   return (
-    <section className="relative flex min-h-[calc(100vh-64px)] w-full flex-col px-4 md:px-8 lg:px-12">
-      <div className="flex flex-1 flex-col items-center justify-center text-center">
-        {/* Centered Content */}
-        <div className="mx-auto mt-16 mb-8 w-full max-w-4xl lg:mb-0">
-          {/* What's New Tag */}
-          {SHOW_WHATS_NEW && (
-            <div className="hero-enter mb-8 flex items-center justify-center gap-2">
-              <Tag
-                size="sm"
-                border="with"
-                color="neutral"
-                className="rounded-full border font-medium text-sm text-text"
-              >
-                {whatsNew}
-              </Tag>
-              <Link
-                to={Website_ReleasesV9_Path}
-                color="neutral"
-                label={whatsNewLabel.value}
-              >
-                <span className="flex items-center gap-1 font-medium text-neutral-500 text-sm sm:text-sm dark:text-neutral-400">
-                  {version} v{packageJSON.version}{' '}
-                  <ArrowRight className="h-3 w-3" />
-                </span>
+    <>
+      <section className="relative flex w-full flex-col px-4 md:px-8 lg:px-12">
+        <div className="flex flex-1 flex-col items-center justify-center pt-16 pb-8">
+            <motion.div
+              initial={{ opacity: 0, y: 30 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+              className="mb-8 flex items-center justify-center gap-2"
+            >
+              <Link to={Website_ReleasesV9_Path} label={whatsNewLabel.value}>
+                <Tag
+                  size="sm"
+                  border="with"
+                  className="flex items-center gap-2 rounded-full border font-medium text-foreground text-sm"
+                >
+                  <Megaphone className="size-4" />
+                  <span className="flex items-center gap-1 font-medium text-sm sm:text-sm">
+                    {version} v{packageJSON.version}{' '}
+                    <ArrowRight className="size-3" />
+                  </span>
+                </Tag>
               </Link>
-            </div>
+            </motion.div>
           )}
 
           {/* Title */}
@@ -67,12 +66,14 @@ export const HeroSection: FC = () => {
             {title}
           </h1>
           {/* Subtitle */}
-          <h2
-            className="hero-enter-sharpen mb-6 text-center font-semibold text-text text-xl sm:text-3xl md:text-3xl lg:mb-8 lg:text-4xl"
-            style={{ animationDelay: '0.5s' }}
+          <motion.h2
+            initial={{ filter: 'blur(10px)', opacity: 0, y: 30 }}
+            animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 0.5 }}
+            className="mb-6 text-center font-semibold text-primary text-xl sm:text-3xl md:text-3xl lg:mb-8 lg:text-4xl"
           >
             {subheading}
-          </h2>
+          </motion.h2>
           {/* Description */}
           <p
             className="hero-enter mx-auto max-w-2xl text-center font-medium text-neutral text-sm leading-relaxed sm:text-lg lg:mb-12"
@@ -129,18 +130,19 @@ export const HeroSection: FC = () => {
               <ArrowRight width={20} height={20} />
             </Link>
           </div>
-          {/* Available For Section - Full Viewport Width */}
-          <div
-            className="hero-enter relative right-1/2 left-1/2 mt-8 mr-[-50vw] ml-[-50vw] w-screen text-center"
-            style={{ animationDelay: '1s' }}
-          >
-            <p className="font-medium text-sm text-text tracking-wider sm:text-base">
-              {availableFor}
-            </p>
-            <TechLogos />
-          </div>
         </div>
-      </div>
-    </section>
+      </section>
+      <motion.section
+        initial={{ opacity: 0, y: 30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 1.0, duration: 0.6 }}
+        className="relative mt-8 w-full border-t"
+      >
+        <p className="hidden font-medium text-foreground text-sm tracking-wider sm:text-base">
+          {availableFor}
+        </p>
+        <TechLogos />
+      </motion.section>
+    </>
   );
 };
diff --git a/apps/website/src/components/LandingPage/ProductsSection/ProductSectionLayout.tsx b/apps/website/src/components/LandingPage/ProductsSection/ProductSectionLayout.tsx
index 9bf0d1623b..cf09db7243 100644
--- a/apps/website/src/components/LandingPage/ProductsSection/ProductSectionLayout.tsx
+++ b/apps/website/src/components/LandingPage/ProductsSection/ProductSectionLayout.tsx
@@ -36,7 +36,7 @@ export const ProductSectionLayout: FC<ProductSectionLayoutProps> = ({
       </Tag>
 
       {/* Main Title */}
-      <h2 className="mb-6 max-w-5xl text-center font-bold text-2xl text-text leading-tight">
+      <h2 className="mb-6 max-w-5xl text-center font-bold text-2xl text-foreground leading-tight">
         {title}
       </h2>
 
diff --git a/apps/website/src/components/LandingPage/ProductsSection/TMSSection/index.tsx b/apps/website/src/components/LandingPage/ProductsSection/TMSSection/index.tsx
index 27cd8ee49d..59938936f2 100644
--- a/apps/website/src/components/LandingPage/ProductsSection/TMSSection/index.tsx
+++ b/apps/website/src/components/LandingPage/ProductsSection/TMSSection/index.tsx
@@ -19,7 +19,9 @@ export const TMSSection: FC = () => {
       title={heroTitle}
       description={
         <div className="space-y-4">
-          <p className="text-center font-medium text-text">{heroSubtitle}</p>
+          <p className="text-center font-medium text-foreground">
+            {heroSubtitle}
+          </p>
           <p>{heroDescription}</p>
         </div>
       }
diff --git a/apps/website/src/components/LandingPage/ProductsSection/TranslateSection/index.tsx b/apps/website/src/components/LandingPage/ProductsSection/TranslateSection/index.tsx
index 46ba1158f4..e32a101807 100644
--- a/apps/website/src/components/LandingPage/ProductsSection/TranslateSection/index.tsx
+++ b/apps/website/src/components/LandingPage/ProductsSection/TranslateSection/index.tsx
@@ -19,7 +19,9 @@ export const TranslateSection: FC = () => {
       title={heroTitle}
       description={
         <div className="space-y-4">
-          <p className="text-center font-medium text-text">{heroSubtitle}</p>
+          <p className="text-center font-medium text-foreground">
+            {heroSubtitle}
+          </p>
           <p>{heroDescription}</p>
         </div>
       }
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index 3045981d09..67aee6c8cf 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -66,73 +66,8 @@ export const LandingPage: FC = () => {
         aria-label={content.landingMainTitle.value}
         className="flex flex-col gap-10"
       >
-        <BackgroundLayout>
-          <section aria-label={content.heroSection.value}>
-            <HeroSection />
-          </section>
-          <section aria-label={content.keyFeaturesSection.value}>
-            <Suspense fallback={<Loader />}>
-              <FeaturesSection />
-            </Suspense>
-          </section>
-        </BackgroundLayout>
-
-        <section aria-label={content.whyChooseIntlayerSection.value}>
-          <Suspense fallback={<Loader />}>
-            <WhyToChoseIntlayerSection />
-          </Suspense>
-        </section>
-
-        <div className="relative flex w-full flex-col gap-24 overflow-hidden bg-neutral/5 py-16 dark:bg-neutral-900/10">
-          <section aria-label={content.benchmarkSection.value}>
-            <Suspense fallback={<Loader />}>
-              <I18nBenchmarkSection />
-            </Suspense>
-          </section>
-
-          <section aria-label={content.supportedLanguagesSection.value}>
-            <Suspense fallback={<Loader />}>
-              <LanguageSection />
-            </Suspense>
-          </section>
-
-          <section aria-label={content.codeAuditSection.value}>
-            <Suspense fallback={<Loader />}>
-              <AuditSection />
-            </Suspense>
-          </section>
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 top-0 h-4 bg-background [clip-path:polygon(0_0,100%_0,0_100%)]"
-          />
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 bottom-0 h-4 bg-background [clip-path:polygon(100%_0,100%_100%,0_100%)]"
-          />
-        </div>
-
-        <section aria-label={content.productsSection.value}>
-          <Suspense fallback={<Loader />}>
-            <ProductsSection />
-          </Suspense>
-        </section>
-        <section aria-label={content.technologiesSection.value}>
-          <Suspense fallback={<Loader />}>
-            <AvailableTechnoSection />
-          </Suspense>
-        </section>
-        <section aria-label={content.liveDemoSection.value}>
-          <Suspense fallback={<Loader />}>
-            <DemoSection />
-          </Suspense>
-        </section>
-        <section aria-label={content.contributorsSection.value}>
-          <Suspense fallback={<Loader />}>
-            <ContributorSection />
-          </Suspense>
-        </section>
-        <section aria-label={content.faqSection.value}>
-          <CommonQuestionsSection />
+        <section aria-label={content.heroSection.value}>
+          <HeroSection />
         </section>
       </main>
 
@@ -142,3 +77,71 @@ export const LandingPage: FC = () => {
     </>
   );
 };
+
+/*
+
+<section aria-label={content.keyFeaturesSection.value}>
+  <Suspense fallback={<Loader />}>
+    <FeaturesSection />
+  </Suspense>
+</section>
+
+<section aria-label={content.whyChooseIntlayerSection.value}>
+  <Suspense fallback={<Loader />}>
+    <WhyToChoseIntlayerSection />
+  </Suspense>
+</section>
+
+<div className="relative flex w-full flex-col gap-24 overflow-hidden bg-neutral/5 py-16 dark:bg-neutral-900/10">
+  <section aria-label={content.benchmarkSection.value}>
+    <Suspense fallback={<Loader />}>
+      <I18nBenchmarkSection />
+    </Suspense>
+  </section>
+
+  <section aria-label={content.supportedLanguagesSection.value}>
+    <Suspense fallback={<Loader />}>
+      <LanguageSection />
+    </Suspense>
+  </section>
+
+  <section aria-label={content.codeAuditSection.value}>
+    <Suspense fallback={<Loader />}>
+      <AuditSection />
+    </Suspense>
+  </section>
+  <div
+    aria-hidden="true"
+    className="pointer-events-none absolute inset-x-0 top-0 h-4 bg-background [clip-path:polygon(0_0,100%_0,0_100%)]"
+  />
+  <div
+    aria-hidden="true"
+    className="pointer-events-none absolute inset-x-0 bottom-0 h-4 bg-background [clip-path:polygon(100%_0,100%_100%,0_100%)]"
+  />
+</div>
+
+<section aria-label={content.productsSection.value}>
+  <Suspense fallback={<Loader />}>
+    <ProductsSection />
+  </Suspense>
+</section>
+<section aria-label={content.technologiesSection.value}>
+  <Suspense fallback={<Loader />}>
+    <AvailableTechnoSection />
+  </Suspense>
+</section>
+<section aria-label={content.liveDemoSection.value}>
+  <Suspense fallback={<Loader />}>
+    <DemoSection />
+  </Suspense>
+</section>
+<section aria-label={content.contributorsSection.value}>
+  <Suspense fallback={<Loader />}>
+    <ContributorSection />
+  </Suspense>
+</section>
+<section aria-label={content.faqSection.value}>
+  <CommonQuestionsSection />
+</section>
+
+*/
diff --git a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
index 1862aa94fd..bc16a9f07a 100644
--- a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
+++ b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
@@ -53,7 +53,7 @@ export const LocaleSwitcher: FC<LocaleSwitcherProps> = ({
   };
 
   return (
-    <div className="flex rounded-xl text-text transition-colors">
+    <div className="flex rounded-xl text-foreground transition-colors">
       <DropDown identifier={DROPDOWN_IDENTIFIER}>
         <DropDown.Trigger
           identifier={DROPDOWN_IDENTIFIER}
diff --git a/apps/website/src/components/Navbar/index.tsx b/apps/website/src/components/Navbar/index.tsx
index 6771b89c27..a65949a6f9 100644
--- a/apps/website/src/components/Navbar/index.tsx
+++ b/apps/website/src/components/Navbar/index.tsx
@@ -114,7 +114,7 @@ export const Navbar: FC<NavbarProps> = ({ mobileRollable = true }) => {
             aria-haspopup="true"
             aria-controls="dropdown-panel-navbar-logo"
           >
-            <LogoWithText className="max-h-6 w-auto flex-auto text-text" />
+            <LogoWithText className="max-h-6 w-auto flex-auto text-foreground" />
           </Link>
 
           {!isMobile && (
@@ -144,7 +144,7 @@ export const Navbar: FC<NavbarProps> = ({ mobileRollable = true }) => {
                     downloadFile('/logo.svg', 'intlayer-logo.svg');
                   }}
                 >
-                  <span className="ml-2 flex w-full text-text">
+                  <span className="ml-2 flex w-full text-foreground">
                     {logo.downloadSvg.label}
                   </span>
                 </Button>
@@ -163,7 +163,7 @@ export const Navbar: FC<NavbarProps> = ({ mobileRollable = true }) => {
                     );
                   }}
                 >
-                  <span className="ml-2 flex w-full text-text">
+                  <span className="ml-2 flex w-full text-foreground">
                     {logo.downloadPng.label}
                   </span>
                 </Button>
@@ -179,7 +179,7 @@ export const Navbar: FC<NavbarProps> = ({ mobileRollable = true }) => {
                     copySvg();
                   }}
                 >
-                  <span className="ml-2 flex w-full text-text">
+                  <span className="ml-2 flex w-full text-foreground">
                     {logo.copyAsSvg.label}
                   </span>
                 </Button>
@@ -195,7 +195,7 @@ export const Navbar: FC<NavbarProps> = ({ mobileRollable = true }) => {
                     copyImage();
                   }}
                 >
-                  <span className="ml-2 flex w-full text-text">
+                  <span className="ml-2 flex w-full text-foreground">
                     {logo.copyAsImage.label}
                   </span>
                 </Button>
diff --git a/apps/website/src/components/NotFoundComponent.tsx b/apps/website/src/components/NotFoundComponent.tsx
index 486ee0eeb8..dab6275af6 100644
--- a/apps/website/src/components/NotFoundComponent.tsx
+++ b/apps/website/src/components/NotFoundComponent.tsx
@@ -3,10 +3,12 @@ import { Link } from '~/components/Link/Link';
 export function NotFoundComponent() {
   return (
     <main className="relative flex min-h-[60vh] flex-col items-center justify-center overflow-hidden px-4 py-12 text-center">
-      <p className="pointer-events-none absolute top-1/2 left-1/2 -z-10 -translate-x-1/2 -translate-y-1/2 font-bold text-350px text-text/10">
+      <p className="pointer-events-none absolute top-1/2 left-1/2 -z-10 -translate-x-1/2 -translate-y-1/2 font-bold text-350px text-foreground/10">
         404
       </p>
-      <h1 className="mb-4 font-bold text-6xl text-text">Page not found</h1>
+      <h1 className="mb-4 font-bold text-6xl text-foreground">
+        Page not found
+      </h1>
       <p className="mb-8 max-w-md text-base text-neutral">
         The page you&apos;re looking for doesn&apos;t exist or has been moved.
       </p>
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
index 32b3e8aa61..5b28ac93fb 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
@@ -73,11 +73,11 @@ export const AnalyzerSiteResults: FC<AnalyzerSiteResultsProps> = ({
   return (
     <div className="flex flex-col pb-6">
       <div className="mb-4 flex items-center justify-between">
-        <span className="font-semibold text-2xl text-text/70">
+        <span className="font-semibold text-2xl text-foreground/70">
           <span className="mr-2 text-neutral">{scoreTitle?.title}:</span>
 
           <Skeleton isLoading={isLoading && !score}>
-            <span className="mr-1 text-text">{score ?? 0}</span>
+            <span className="mr-1 text-foreground">{score ?? 0}</span>
           </Skeleton>
           <span className="text-neutral text-sm">/100</span>
         </span>
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/BundleContentField.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/BundleContentField.tsx
index d2773f1413..c09fe4ed83 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/BundleContentField.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/BundleContentField.tsx
@@ -145,23 +145,23 @@ const BundleSummaryLabel: FC<BundleSummaryLabelProps> = ({ summary }) => {
                           label={chunk.filename}
                           rel="noopener noreferrer"
                           color="custom"
-                          className="text-text/70 text-xs"
+                          className="text-foreground/70 text-xs"
                           size="sm"
                         >
                           {chunk.filename}
                         </Link>
                       </span>
                     </TD>
-                    <TD right className="text-text/60">
+                    <TD right className="text-foreground/60">
                       {chunk.fileSize}
                     </TD>
-                    <TD right className="text-text/70">
+                    <TD right className="text-foreground/70">
                       {chunk.totalLocaleSize}
                     </TD>
-                    <TD right className="text-text/70">
+                    <TD right className="text-foreground/70">
                       {chunk.usedLocaleSize}
                     </TD>
-                    <TD right className="text-text/70">
+                    <TD right className="text-foreground/70">
                       {chunk.unusedLocaleSize}
                     </TD>
                     <TD right className={pctClass}>
@@ -189,14 +189,14 @@ const BundleSummaryLabel: FC<BundleSummaryLabelProps> = ({ summary }) => {
           </thead>
           <tbody>
             <tr>
-              <TD className="text-text/60">{totalsTable.allBundles}</TD>
-              <TD right className="text-text/70">
+              <TD className="text-foreground/60">{totalsTable.allBundles}</TD>
+              <TD right className="text-foreground/70">
                 {summary.totalPageSize}
               </TD>
-              <TD right className="text-text/70">
+              <TD right className="text-foreground/70">
                 {summary.renderedContentSize}
               </TD>
-              <TD right className="text-text/70">
+              <TD right className="text-foreground/70">
                 {summary.totalUnusedLocaleSize}
               </TD>
               <TD
@@ -235,7 +235,7 @@ export const BundleContentField: FC<BundleContentFieldProps> = memo(
 
     return (
       <>
-        <h3 className="mt-6 mb-3 font-semibold text-lg text-text/80">
+        <h3 className="mt-6 mb-3 font-semibold text-foreground/80 text-lg">
           {sections?.bundleContent}
         </h3>
         <FieldItem
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/FieldItem.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/FieldItem.tsx
index 8fbfd5c71d..a149e6035f 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/FieldItem.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/FieldItem.tsx
@@ -135,7 +135,7 @@ export const FieldItem: FC<FieldItemProps> = ({
   <div className="grid grid-cols-[auto_auto_1fr_auto] items-center gap-2 rounded-lg px-2 py-1 text-neutral">
     {icon}
     <strong className="min-w-28">{label}:</strong>
-    <span className="flex items-center justify-end gap-2 text-left text-text/70">
+    <span className="flex items-center justify-end gap-2 text-left text-foreground/70">
       <EventTag id={`${id}-success`} event={event} isLoading={isLoading}>
         {children}
       </EventTag>
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/RobotsSection.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/RobotsSection.tsx
index 908877e1d4..05c4f76121 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/RobotsSection.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/RobotsSection.tsx
@@ -20,7 +20,7 @@ export const RobotsSection: FC<RobotsSectionProps> = memo(
 
     return (
       <>
-        <h3 className="mt-6 mb-3 font-semibold text-lg text-text/80">
+        <h3 className="mt-6 mb-3 font-semibold text-foreground/80 text-lg">
           {sections?.robots}
         </h3>
         <div className="mt-2 grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-x-8 gap-y-2 px-2 text-sm">
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/SitemapSection.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/SitemapSection.tsx
index 6774581325..dac7f2b686 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/SitemapSection.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/SitemapSection.tsx
@@ -20,7 +20,7 @@ export const SitemapSection: FC<SitemapSectionProps> = memo(
 
     return (
       <>
-        <h3 className="mt-6 mb-3 font-semibold text-lg text-text/80">
+        <h3 className="mt-6 mb-3 font-semibold text-foreground/80 text-lg">
           {sections?.sitemap}
         </h3>
         <div className="mt-2 grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-x-8 gap-y-2 px-2 text-sm">
diff --git a/apps/website/src/components/ScannerPage/AnalyzerResultsSection.tsx b/apps/website/src/components/ScannerPage/AnalyzerResultsSection.tsx
index 90f6995fc9..3ee6e19851 100644
--- a/apps/website/src/components/ScannerPage/AnalyzerResultsSection.tsx
+++ b/apps/website/src/components/ScannerPage/AnalyzerResultsSection.tsx
@@ -118,7 +118,7 @@ export const AnalyzerResultsSection: FC<AnalyzerResultsSectionProps> = ({
         </div>
       )}
       {isDiscovering && (
-        <div className="mt-6 border-neutral border-t border-dotted pt-6 text-center text-sm text-text/60">
+        <div className="mt-6 border-neutral border-t border-dotted pt-6 text-center text-foreground/60 text-sm">
           {discoveringUrls}
         </div>
       )}
diff --git a/apps/website/src/components/ScannerPage/RecursiveAuditResults.tsx b/apps/website/src/components/ScannerPage/RecursiveAuditResults.tsx
index a1b7d70d61..113aedf929 100644
--- a/apps/website/src/components/ScannerPage/RecursiveAuditResults.tsx
+++ b/apps/website/src/components/ScannerPage/RecursiveAuditResults.tsx
@@ -72,9 +72,9 @@ const PageRow: FC<{ page: Page }> = ({ page }) => {
           <div className="flex items-center gap-1.5">
             {hasResults ? (
               expanded ? (
-                <ChevronDown className="size-3.5 shrink-0 text-text/40" />
+                <ChevronDown className="size-3.5 shrink-0 text-foreground/40" />
               ) : (
-                <ChevronRight className="size-3.5 shrink-0 text-text/40" />
+                <ChevronRight className="size-3.5 shrink-0 text-foreground/40" />
               )
             ) : (
               <span className="size-3.5 shrink-0" />
@@ -104,7 +104,7 @@ const PageRow: FC<{ page: Page }> = ({ page }) => {
               {page.score}/100
             </Tag>
           ) : (
-            <span className="text-text/40">-</span>
+            <span className="text-foreground/40">-</span>
           )}
         </td>
       </tr>
@@ -203,7 +203,7 @@ export const RecursiveAuditResults: FC<RecursiveAuditResultsProps> = memo(
         </div>
 
         <div className="flex flex-col gap-1">
-          <div className="flex justify-between text-sm text-text/70">
+          <div className="flex justify-between text-foreground/70 text-sm">
             <span>{progressLabel}</span>
             <span>{job.progress}%</span>
           </div>
@@ -213,7 +213,7 @@ export const RecursiveAuditResults: FC<RecursiveAuditResultsProps> = memo(
               style={{ width: `${job.progress}%` }}
             />
           </div>
-          <div className="text-text/50 text-xs">
+          <div className="text-foreground/50 text-xs">
             {job.completedPageCount} / {job.totalPageCount} {pagesAudited}
           </div>
         </div>
diff --git a/apps/website/src/components/ScannerPage/UrlDiscoveryList.tsx b/apps/website/src/components/ScannerPage/UrlDiscoveryList.tsx
index 2a5cd6b979..628bb13ed4 100644
--- a/apps/website/src/components/ScannerPage/UrlDiscoveryList.tsx
+++ b/apps/website/src/components/ScannerPage/UrlDiscoveryList.tsx
@@ -87,7 +87,7 @@ export const UrlDiscoveryList: FC<UrlDiscoveryListProps> = ({
       <div className="flex items-center justify-between gap-4">
         <div>
           <h3 className="font-semibold text-lg">{title}</h3>
-          <p className="mt-0.5 text-sm text-text/60">
+          <p className="mt-0.5 text-foreground/60 text-sm">
             {urls.length} {description}
           </p>
         </div>
@@ -120,7 +120,7 @@ export const UrlDiscoveryList: FC<UrlDiscoveryListProps> = ({
                   label={selectAll.value}
                 />
               </th>
-              <th className="p-3 text-text/60">
+              <th className="p-3 text-foreground/60">
                 {filteredUrls.length === urls.length
                   ? `${urls.length} ${urlsLabel}`
                   : `${filteredUrls.length} / ${urls.length} ${urlsLabel}`}
@@ -154,7 +154,7 @@ export const UrlDiscoveryList: FC<UrlDiscoveryListProps> = ({
         {atLimit && (
           <span className="text-warning text-xs">{maxLimitReached}</span>
         )}
-        <span className="text-sm text-text/60">
+        <span className="text-foreground/60 text-sm">
           {selected.size} / {MAX_URLS} {selectedLabel}
         </span>
         <Button
diff --git a/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx b/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
index 538bfeb1a9..e5251efcb2 100644
--- a/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
@@ -21,7 +21,7 @@ export const ComparisonSection: FC = () => {
     <section className="py-24">
       <div className="mx-auto max-w-5xl px-4 md:px-8 lg:px-12">
         <m.div {...fadeUp} className="mb-16 text-center">
-          <h2 className="font-bold text-3xl text-text sm:text-4xl">
+          <h2 className="font-bold text-3xl text-foreground sm:text-4xl">
             {comparisonTitle}
           </h2>
         </m.div>
@@ -38,7 +38,7 @@ export const ComparisonSection: FC = () => {
           {/* Header */}
           <div className="grid grid-cols-3 bg-neutral/5 p-6 font-semibold text-neutral">
             <div className="col-span-1">{comparisonHeaders.feature}</div>
-            <div className="col-span-1 font-bold text-text">
+            <div className="col-span-1 font-bold text-foreground">
               {comparisonHeaders.intlayer}
             </div>
             <div className="col-span-1 text-neutral/60">
@@ -53,13 +53,13 @@ export const ComparisonSection: FC = () => {
                 key={index}
                 className="grid grid-cols-3 items-center p-6 text-sm hover:bg-neutral/5 sm:text-base"
               >
-                <div className="col-span-1 font-medium text-text">
+                <div className="col-span-1 font-medium text-foreground">
                   {row.feature}
                 </div>
 
                 {/* Intlayer Column */}
-                <div className="col-span-1 flex items-center gap-2 font-semibold text-text">
-                  <span className="flex size-6 items-center justify-center rounded-full bg-text text-text-opposite">
+                <div className="col-span-1 flex items-center gap-2 font-semibold text-foreground">
+                  <span className="flex size-6 items-center justify-center rounded-full bg-text text-foreground-opposite">
                     <Check className="size-3.5" strokeWidth={3} />
                   </span>
                   {row.intlayer}
diff --git a/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx b/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
index dfb05f60a1..3ad33fda30 100644
--- a/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
@@ -69,7 +69,7 @@ export const FeaturesSection: FC = () => {
           variants={headerVariants}
           className="mb-16 text-center"
         >
-          <h2 className="font-bold text-3xl text-text sm:text-4xl">
+          <h2 className="font-bold text-3xl text-foreground sm:text-4xl">
             {featuresTitle}
           </h2>
         </m.div>
@@ -91,12 +91,12 @@ export const FeaturesSection: FC = () => {
               border={true}
               className="group flex flex-col gap-4"
             >
-              <div className="flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-text transition-colors group-hover:bg-primary/10 group-hover:text-primary">
+              <div className="flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
                 {iconMap[feature.icon.value] ?? <Sparkles className="size-6" />}
               </div>
 
               <div>
-                <h3 className="mb-2 font-semibold text-text text-xl">
+                <h3 className="mb-2 font-semibold text-foreground text-xl">
                   {feature.title}
                 </h3>
                 <p className="text-neutral leading-relaxed">
diff --git a/apps/website/src/components/TMSLandingPage/FinalCTASection.tsx b/apps/website/src/components/TMSLandingPage/FinalCTASection.tsx
index ceb8dc9234..a8219b8509 100644
--- a/apps/website/src/components/TMSLandingPage/FinalCTASection.tsx
+++ b/apps/website/src/components/TMSLandingPage/FinalCTASection.tsx
@@ -24,7 +24,7 @@ export const FinalCTASection: FC = () => {
 
       <div className="relative mx-auto max-w-4xl px-4 text-center md:px-8 lg:px-12">
         <m.div {...fadeUp}>
-          <h2 className="mb-6 font-bold text-3xl text-text-opposite sm:text-4xl md:text-5xl">
+          <h2 className="mb-6 font-bold text-3xl text-foreground-opposite sm:text-4xl md:text-5xl">
             {finalCtaTitle}
           </h2>
           <p className="mx-auto mb-10 max-w-xl text-lg text-neutral-300">
@@ -46,7 +46,7 @@ export const FinalCTASection: FC = () => {
               roundedSize="full"
               className="flex flex-row items-center justify-center gap-2"
             >
-              <span className="flex flex-row flex-nowrap items-center gap-2 text-sm text-text sm:text-lg">
+              <span className="flex flex-row flex-nowrap items-center gap-2 text-foreground text-sm sm:text-lg">
                 {finalCtaButton}
                 <ArrowRight className="size-5 transition-transform" />
               </span>
diff --git a/apps/website/src/components/TMSLandingPage/HeroSection.tsx b/apps/website/src/components/TMSLandingPage/HeroSection.tsx
index d6284c6839..9728a06ed4 100644
--- a/apps/website/src/components/TMSLandingPage/HeroSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/HeroSection.tsx
@@ -90,7 +90,7 @@ export const HeroSection: FC = () => {
               initial={{ opacity: 0, y: 40, filter: 'blur(10px)' }}
               animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
               transition={{ duration: 0.7, ease: 'easeOut' }}
-              className="mb-6 font-extrabold text-5xl text-text leading-[1.1] sm:text-6xl md:text-7xl"
+              className="mb-6 font-extrabold text-5xl text-foreground leading-[1.1] sm:text-6xl md:text-7xl"
             >
               {heroTitle}
             </m.h1>
@@ -150,7 +150,7 @@ export const HeroSection: FC = () => {
 
         {/* Screenshot Preview */}
 
-        {/* 3D WRAPPER 
+        {/* 3D WRAPPER
         We add a wrapper div here to establish the "perspective".
         'perspective-[1200px]' is a Tailwind arbitrary value (or standard CSS perspective: 1200px).
         This creates the "vanishing point".
diff --git a/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx b/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
index d032f04443..6987136182 100644
--- a/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
@@ -42,7 +42,7 @@ export const PainPointsSection: FC = () => {
           whileInView={{ opacity: 1, y: 0 }}
           viewport={{ once: true }}
           transition={{ duration: 0.6 }}
-          className="mb-16 text-center font-bold text-3xl text-text sm:text-4xl"
+          className="mb-16 text-center font-bold text-3xl text-foreground sm:text-4xl"
         >
           {painPointsTitle}
         </m.h2>
@@ -64,10 +64,10 @@ export const PainPointsSection: FC = () => {
               border={true}
               className="relative"
             >
-              <div className="mb-5 flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-text">
+              <div className="mb-5 flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-foreground">
                 {iconMap[point.icon.value]}
               </div>
-              <h3 className="mb-3 font-semibold text-text text-xl">
+              <h3 className="mb-3 font-semibold text-foreground text-xl">
                 {point.title}
               </h3>
               <p className="text-neutral leading-relaxed">
diff --git a/apps/website/src/components/TranslationLandingPage/CTASection.tsx b/apps/website/src/components/TranslationLandingPage/CTASection.tsx
index 750523c83d..e3c31cc001 100644
--- a/apps/website/src/components/TranslationLandingPage/CTASection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/CTASection.tsx
@@ -24,11 +24,14 @@ const CodeBlockWrapper: FC<CodeBlockWrapperProps> = ({
       border
       borderColor="card"
       background="none"
-      className={cn('relative overflow-hidden text-text-opposite', className)}
+      className={cn(
+        'relative overflow-hidden text-foreground-opposite',
+        className
+      )}
     >
       <div className="mb-2 flex items-center justify-between">
-        <span className="text-text/70 text-xs">{title}</span>
-        <span className="text-text/40 text-xs">CLI</span>
+        <span className="text-foreground/70 text-xs">{title}</span>
+        <span className="text-foreground/40 text-xs">CLI</span>
       </div>
       {children}
     </Container>
@@ -60,10 +63,10 @@ export const CTASection: FC = () => {
       >
         <div className="grid grid-cols-1 items-center gap-6 md:grid-cols-12">
           <div className="md:col-span-7">
-            <h3 className="font-semibold text-2xl text-text md:text-3xl">
+            <h3 className="font-semibold text-2xl text-foreground md:text-3xl">
               {title}
             </h3>
-            <p className="mt-2 max-w-2xl text-base text-text/70">
+            <p className="mt-2 max-w-2xl text-base text-foreground/70">
               {description}
             </p>
             <div className="mt-5 flex flex-col gap-3 sm:flex-row">
diff --git a/apps/website/src/components/TranslationLandingPage/CommandsSection.tsx b/apps/website/src/components/TranslationLandingPage/CommandsSection.tsx
index 466437eb26..44274fe8a8 100644
--- a/apps/website/src/components/TranslationLandingPage/CommandsSection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/CommandsSection.tsx
@@ -42,10 +42,12 @@ export const CommandsSection: FC = () => {
         whileInView="show"
         viewport={{ once: true, amount: 0.25 }}
       >
-        <h2 className="font-semibold text-2xl text-text md:text-3xl">
+        <h2 className="font-semibold text-2xl text-foreground md:text-3xl">
           {title}
         </h2>
-        <p className="mt-2 max-w-2xl text-base text-text/70">{description}</p>
+        <p className="mt-2 max-w-2xl text-base text-foreground/70">
+          {description}
+        </p>
       </motion.div>
 
       <motion.div
@@ -68,13 +70,13 @@ export const CommandsSection: FC = () => {
                 <div className="flex items-start justify-between gap-3">
                   <div className="flex items-center gap-2">
                     <div className="rounded-2xl bg-card/40 p-2">
-                      <IconComponent className="size-5 text-text" />
+                      <IconComponent className="size-5 text-foreground" />
                     </div>
                     <div>
-                      <div className="font-semibold text-base text-text">
+                      <div className="font-semibold text-base text-foreground">
                         {cmd.title}
                       </div>
-                      <div className="mt-1 text-sm text-text/70">
+                      <div className="mt-1 text-foreground/70 text-sm">
                         {cmd.description}
                       </div>
                     </div>
@@ -85,13 +87,15 @@ export const CommandsSection: FC = () => {
                   <Container
                     roundedSize="2xl"
                     padding="md"
-                    className="relative overflow-hidden text-text-dark"
+                    className="relative overflow-hidden text-foreground-dark"
                   >
                     <div className="mb-2 flex items-center justify-between">
-                      <span className="text-text-dark/70 text-xs">
+                      <span className="text-foreground-dark/70 text-xs">
                         {cmd.title}
                       </span>
-                      <span className="text-text-dark/40 text-xs">CLI</span>
+                      <span className="text-foreground-dark/40 text-xs">
+                        CLI
+                      </span>
                     </div>
                     <CodeBlock lang="bash" className="text-sm">
                       {cmd.code.value}
diff --git a/apps/website/src/components/TranslationLandingPage/HeroSection.tsx b/apps/website/src/components/TranslationLandingPage/HeroSection.tsx
index 6b73630674..a33e3b3b03 100644
--- a/apps/website/src/components/TranslationLandingPage/HeroSection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/HeroSection.tsx
@@ -32,11 +32,11 @@ export const CodeBlockWrapper: FC<CodeBlockWrapperProps> = ({
     <Container
       roundedSize="2xl"
       padding="md"
-      className={cn('relative text-text-dark', className)}
+      className={cn('relative text-foreground-dark', className)}
     >
       <div className="mb-2 flex items-center justify-between">
-        <span className="text-text-dark/70 text-xs">{title}</span>
-        <span className="text-text-dark/40 text-xs">CLI</span>
+        <span className="text-foreground-dark/70 text-xs">{title}</span>
+        <span className="text-foreground-dark/40 text-xs">CLI</span>
       </div>
       {children}
     </Container>
@@ -59,7 +59,7 @@ export const Pill: FC<{ children: ReactNode; className?: string }> = ({
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-2 rounded-full border-[1.3px] border-text/15 bg-card/30 px-3 py-1 text-text text-xs backdrop-blur supports-[corner-shape:squircle]:rounded-full',
+        'inline-flex items-center gap-2 rounded-full border-[1.3px] border-text/15 bg-card/30 px-3 py-1 text-foreground text-xs backdrop-blur supports-[corner-shape:squircle]:rounded-full',
         className
       )}
     >
@@ -113,19 +113,19 @@ export const HeroSection: FC = () => {
       <section className="items-evenly relative mx-auto flex h-[75vh] max-w-6xl flex-col justify-center gap-12 px-8">
         <div className="mb-4 flex flex-wrap gap-2">
           <Pill>
-            <CreditCard className="size-3 text-text" />
+            <CreditCard className="size-3 text-foreground" />
             {pills.freeOpenSource}
           </Pill>
           <Pill>
-            <FileJson className="size-3 text-text" />
+            <FileJson className="size-3 text-foreground" />
             {pills.jsonTranslation}
           </Pill>
           <Pill>
-            <FileText className="size-3 text-text" />
+            <FileText className="size-3 text-foreground" />
             {pills.docsTranslation}
           </Pill>
           <Pill>
-            <Server className="size-3 text-text" />
+            <Server className="size-3 text-foreground" />
             {pills.localLLM}
           </Pill>
         </div>
@@ -136,11 +136,11 @@ export const HeroSection: FC = () => {
           className="grid grid-cols-1 items-start gap-x-8 gap-y-20 md:grid-cols-12"
         >
           <div className="md:col-span-7">
-            <h1 className="text-balance font-semibold text-4xl text-text leading-tight md:text-5xl">
+            <h1 className="text-balance font-semibold text-4xl text-foreground leading-tight md:text-5xl">
               {title}
             </h1>
 
-            <p className="mt-4 max-w-xl text-pretty text-base text-text/70 md:text-lg">
+            <p className="mt-4 max-w-xl text-pretty text-base text-foreground/70 md:text-lg">
               {description}
             </p>
 
@@ -175,9 +175,9 @@ export const HeroSection: FC = () => {
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
                 <div className="rounded-xl bg-text/10 p-2">
-                  <Globe className="size-5 text-text" />
+                  <Globe className="size-5 text-foreground" />
                 </div>
-                <div className="font-medium text-sm text-text">
+                <div className="font-medium text-foreground text-sm">
                   {card.title}
                 </div>
               </div>
@@ -190,21 +190,21 @@ export const HeroSection: FC = () => {
               </CodeBlock>
             </CodeBlockWrapper>
 
-            <div className="mt-4 grid grid-cols-2 gap-3 text-text/70 text-xs">
+            <div className="mt-4 grid grid-cols-2 gap-3 text-foreground/70 text-xs">
               <div className="flex items-center gap-2">
-                <CheckCircle2 className="size-4 text-text" />
+                <CheckCircle2 className="size-4 text-foreground" />
                 {card.features.noMonthlyFees}
               </div>
               <div className="flex items-center gap-2">
-                <Languages className="size-4 text-text" />
+                <Languages className="size-4 text-foreground" />
                 {card.features.multiLanguage}
               </div>
               <div className="flex items-center gap-2">
-                <Server className="size-4 text-text" />
+                <Server className="size-4 text-foreground" />
                 {card.features.runsLocally}
               </div>
               <div className="flex items-center gap-2">
-                <Sparkles className="size-4 text-text" />
+                <Sparkles className="size-4 text-foreground" />
                 {card.features.byoKeysLLM}
               </div>
             </div>
diff --git a/apps/website/src/components/TranslationLandingPage/HowItWorksSection.tsx b/apps/website/src/components/TranslationLandingPage/HowItWorksSection.tsx
index fc849f6cf4..e19f8e67ec 100644
--- a/apps/website/src/components/TranslationLandingPage/HowItWorksSection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/HowItWorksSection.tsx
@@ -40,10 +40,12 @@ export const HowItWorksSection: FC = () => {
         whileInView="show"
         viewport={{ once: true, amount: 0.25 }}
       >
-        <h2 className="font-semibold text-2xl text-text md:text-3xl">
+        <h2 className="font-semibold text-2xl text-foreground md:text-3xl">
           {title}
         </h2>
-        <p className="mt-2 max-w-2xl text-base text-text/70">{description}</p>
+        <p className="mt-2 max-w-2xl text-base text-foreground/70">
+          {description}
+        </p>
       </motion.div>
 
       <motion.div
diff --git a/apps/website/src/components/TranslationLandingPage/KeyPointsSection.tsx b/apps/website/src/components/TranslationLandingPage/KeyPointsSection.tsx
index 599c9d996a..1429aa4e5a 100644
--- a/apps/website/src/components/TranslationLandingPage/KeyPointsSection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/KeyPointsSection.tsx
@@ -49,10 +49,12 @@ export const KeyPointsSection: FC = () => {
         whileInView="show"
         viewport={{ once: true, amount: 0.25 }}
       >
-        <h2 className="font-semibold text-2xl text-text md:text-3xl">
+        <h2 className="font-semibold text-2xl text-foreground md:text-3xl">
           {title}
         </h2>
-        <p className="mt-2 max-w-2xl text-base text-text/70">{description}</p>
+        <p className="mt-2 max-w-2xl text-base text-foreground/70">
+          {description}
+        </p>
       </motion.div>
 
       <motion.div
@@ -79,13 +81,13 @@ export const KeyPointsSection: FC = () => {
                 >
                   <div className="flex items-start gap-3">
                     <div className="rounded-2xl bg-card/40 p-2">
-                      <IconComponent className="size-5 text-text" />
+                      <IconComponent className="size-5 text-foreground" />
                     </div>
                     <div>
-                      <div className="font-semibold text-base text-text">
+                      <div className="font-semibold text-base text-foreground">
                         {feature.title}
                       </div>
-                      <div className="mt-1 text-sm text-text/70">
+                      <div className="mt-1 text-foreground/70 text-sm">
                         {feature.description}
                       </div>
                     </div>
diff --git a/apps/website/src/components/TranslationLandingPage/LocalVsServerSection.tsx b/apps/website/src/components/TranslationLandingPage/LocalVsServerSection.tsx
index c2f5741011..fa41ddf4ca 100644
--- a/apps/website/src/components/TranslationLandingPage/LocalVsServerSection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/LocalVsServerSection.tsx
@@ -31,10 +31,12 @@ export const LocalVsServerSection: FC = () => {
         whileInView="show"
         viewport={{ once: true, amount: 0.25 }}
       >
-        <h2 className="font-semibold text-2xl text-text md:text-3xl">
+        <h2 className="font-semibold text-2xl text-foreground md:text-3xl">
           {title}
         </h2>
-        <p className="mt-2 max-w-2xl text-base text-text/70">{description}</p>
+        <p className="mt-2 max-w-2xl text-base text-foreground/70">
+          {description}
+        </p>
       </motion.div>
 
       <motion.div
@@ -53,22 +55,22 @@ export const LocalVsServerSection: FC = () => {
           >
             <div className="flex items-start gap-3">
               <div className="rounded-2xl bg-text/15 p-2">
-                <Laptop className="size-5 text-text" />
+                <Laptop className="size-5 text-foreground" />
               </div>
               <div>
-                <div className="font-semibold text-base text-text">
+                <div className="font-semibold text-base text-foreground">
                   {local.title}
                 </div>
-                <div className="mt-1 text-sm text-text/70">
+                <div className="mt-1 text-foreground/70 text-sm">
                   {local.description}
                 </div>
               </div>
             </div>
 
-            <div className="mt-4 grid gap-2 text-sm text-text/70">
+            <div className="mt-4 grid gap-2 text-foreground/70 text-sm">
               {local.features.map((feature: IntlayerNode) => (
                 <div key={feature.value} className="flex items-center gap-2">
-                  <CheckCircle2 className="size-4 text-text" /> {feature}
+                  <CheckCircle2 className="size-4 text-foreground" /> {feature}
                 </div>
               ))}
             </div>
@@ -84,22 +86,22 @@ export const LocalVsServerSection: FC = () => {
           >
             <div className="flex items-start gap-3">
               <div className="rounded-2xl bg-text/20 p-2">
-                <Server className="size-5 text-text" />
+                <Server className="size-5 text-foreground" />
               </div>
               <div>
-                <div className="font-semibold text-base text-text">
+                <div className="font-semibold text-base text-foreground">
                   {server.title}
                 </div>
-                <div className="mt-1 text-sm text-text/70">
+                <div className="mt-1 text-foreground/70 text-sm">
                   {server.description}
                 </div>
               </div>
             </div>
 
-            <div className="mt-4 grid gap-2 text-sm text-text/70">
+            <div className="mt-4 grid gap-2 text-foreground/70 text-sm">
               {server.features.map((feature: IntlayerNode) => (
                 <div key={feature.value} className="flex items-center gap-2">
-                  <CheckCircle2 className="size-4 text-text" /> {feature}
+                  <CheckCircle2 className="size-4 text-foreground" /> {feature}
                 </div>
               ))}
             </div>
diff --git a/apps/website/src/components/TranslationLandingPage/ProvidersCarousel.tsx b/apps/website/src/components/TranslationLandingPage/ProvidersCarousel.tsx
index 07f35546ff..1600cef1a0 100644
--- a/apps/website/src/components/TranslationLandingPage/ProvidersCarousel.tsx
+++ b/apps/website/src/components/TranslationLandingPage/ProvidersCarousel.tsx
@@ -13,8 +13,8 @@ const providers: Array<{ name: string; logoName: TechLogoName }> = [
 export const ProvidersCarousel: FC = () => {
   return (
     <div className="mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] relative mt-8 flex w-full overflow-hidden">
-      {/* Fix: Removed 'gap-10' from the container. 
-        Infinite loops work best when spacing is handled by the items' margins 
+      {/* Fix: Removed 'gap-10' from the container.
+        Infinite loops work best when spacing is handled by the items' margins
         to ensure the width calculation for the loop reset is precise.
       */}
       <div className="horizontal-loop-4 inline-flex shrink-0 will-change-transform">
@@ -37,7 +37,7 @@ export const ProvidersCarousel: FC = () => {
                     aria-hidden="true"
                   />
                 )}
-                <span className="text-nowrap font-medium text-base text-text/80 group-hover:text-text">
+                <span className="text-nowrap font-medium text-base text-foreground/80 group-hover:text-foreground">
                   {provider.name}
                 </span>
               </Container>
@@ -63,7 +63,7 @@ export const ProvidersCarousel: FC = () => {
                     aria-hidden="true"
                   />
                 )}
-                <span className="text-nowrap font-medium text-base text-text/80 group-hover:text-text">
+                <span className="text-nowrap font-medium text-base text-foreground/80 group-hover:text-foreground">
                   {provider.name}
                 </span>
               </Container>
diff --git a/apps/website/src/globals.css b/apps/website/src/globals.css
index d092272037..43198b06ca 100644
--- a/apps/website/src/globals.css
+++ b/apps/website/src/globals.css
@@ -1,9 +1,9 @@
-@import "@intlayer/design-system/css";
-@import "tailwindcss";
+@import '@intlayer/design-system/css';
+@import 'tailwindcss';
 /* Inlined rather than linked separately: as their own <link> elements these
    blocked the first render for a round trip each, for a few KB of rules. */
-@import "./shiki.css";
-@import "./monaco.css";
+@import './shiki.css';
+@import './monaco.css';
 
 @media (min-width: 1024px) {
   .no-scrollbar {
@@ -26,6 +26,39 @@
   }
 }
 
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes blur-up {
+  from {
+    opacity: 0;
+    filter: blur(10px);
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+
 @keyframes shrink-title {
   to {
     font-size: 1.2rem;
diff --git a/apps/website/src/routes/{-$locale}/i18n-seo-scanner.tsx b/apps/website/src/routes/{-$locale}/i18n-seo-scanner.tsx
index 2fc2cbf2a2..e8da935dc0 100644
--- a/apps/website/src/routes/{-$locale}/i18n-seo-scanner.tsx
+++ b/apps/website/src/routes/{-$locale}/i18n-seo-scanner.tsx
@@ -106,7 +106,7 @@ function AuditContent() {
     <div className="relative flex size-full flex-1 flex-col">
       <BackgroundLayout />
       <main className="relative flex flex-1 flex-col items-center justify-center gap-16 px-4 pt-20 md:px-10">
-        <h1 className="max-w-3xl text-center font-bold text-3xl text-text leading-tight sm:text-5xl md:text-5xl lg:text-5xl">
+        <h1 className="max-w-3xl text-center font-bold text-3xl text-foreground leading-tight sm:text-5xl md:text-5xl lg:text-5xl">
           {title}
         </h1>
         <p className="max-w-2xl text-neutral leading-relaxed">{description}</p>
diff --git a/apps/website/src/routes/{-$locale}/index.tsx b/apps/website/src/routes/{-$locale}/index.tsx
index 36b3b88bb3..6406cf65fc 100644
--- a/apps/website/src/routes/{-$locale}/index.tsx
+++ b/apps/website/src/routes/{-$locale}/index.tsx
@@ -100,7 +100,7 @@ export const Route = createFileRoute('/{-$locale}/')({
 
 function LandingPage() {
   return (
-    <PageLayout>
+    <PageLayout mainClassName="max-w-[1300px] mx-auto border-x">
       <LandingPageContent />
     </PageLayout>
   );
diff --git a/packages/@intlayer/design-system/.storybook/preview.tsx b/packages/@intlayer/design-system/.storybook/preview.tsx
index f895c8e37e..bc25fbec40 100644
--- a/packages/@intlayer/design-system/.storybook/preview.tsx
+++ b/packages/@intlayer/design-system/.storybook/preview.tsx
@@ -1,6 +1,6 @@
 import type { Preview, StoryContext } from '@storybook/react';
 import { useEffect } from 'react';
-import '../tailwind.css';
+import '../styles/globals.css';
 
 const ThemeProvider = ({
   children,
@@ -24,7 +24,7 @@ const preview: Preview = {
 
       return (
         <ThemeProvider theme={theme}>
-          <div className="min-h-screen bg-background p-4 text-text">
+          <div className="min-h-screen bg-background p-4 text-foreground">
             <Story />
           </div>
         </ThemeProvider>
diff --git a/packages/@intlayer/design-system/package.json b/packages/@intlayer/design-system/package.json
index c633294c64..2255844ef8 100644
--- a/packages/@intlayer/design-system/package.json
+++ b/packages/@intlayer/design-system/package.json
@@ -78,8 +78,8 @@
       "import": "./dist/esm/tailwind.config.mjs",
       "default": "./dist/esm/tailwind.config.mjs"
     },
-    "./css": "./tailwind.css",
-    "./css-output": "./dist/tailwind.css",
+    "./css": "./styles/globals.css",
+    "./css-output": "./dist/styles/globals.css",
     "./markdown-editor.css": "./src/components/MarkdownEditor/markdown-editor.css",
     "./package.json": "./package.json",
     "./accordion": {
@@ -413,14 +413,14 @@
   "files": [
     "dist",
     "package.json",
-    "tailwind.css",
+    "styles/globals.css",
     "tw-source.css",
     "src/components/MarkdownEditor/markdown-editor.css"
   ],
   "scripts": {
     "build": "bun --bun tsdown --config tsdown.config.ts",
     "build:ci": "bun --bun tsdown --config tsdown.config.ts",
-    "build:css": "npx tailwindcss --minify -i ./tailwind.css -o ./dist/tailwind.css",
+    "build:css": "npx tailwindcss --minify -i ./styles/globals.css -o ./dist/styles/globals.css",
     "build:intlayer": "intlayer build",
     "build:package": "bun --bun tsdown --config tsdown.config.ts",
     "build:storybook": "storybook build",
diff --git a/packages/@intlayer/design-system/src/components/Avatar/index.tsx b/packages/@intlayer/design-system/src/components/Avatar/index.tsx
index d82a5a2924..a5d300a644 100644
--- a/packages/@intlayer/design-system/src/components/Avatar/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Avatar/index.tsx
@@ -185,7 +185,7 @@ export const Avatar: FC<AvatarProps> = ({
       {...props}
     >
       <div className="relative flex aspect-square size-full flex-row items-center justify-center">
-        <div className="absolute top-0 left-0 flex aspect-square size-full flex-col items-center justify-center rounded-full bg-text text-text-opposite">
+        <div className="absolute top-0 left-0 flex aspect-square size-full flex-col items-center justify-center rounded-full bg-text text-foreground-opposite">
           {displayLoader && (
             <Loader className="w-3/4" aria-label="Loading user avatar" />
           )}
diff --git a/packages/@intlayer/design-system/src/components/Badge/index.tsx b/packages/@intlayer/design-system/src/components/Badge/index.tsx
index 25b289d9ba..5749c395ef 100644
--- a/packages/@intlayer/design-system/src/components/Badge/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Badge/index.tsx
@@ -46,11 +46,11 @@ export const badgeVariants = cva(
         neutral: 'border-neutral bg-neutral text-neutral hover:bg-neutral-600',
         light: 'border-white bg-white text-white hover:bg-neutral-500',
         dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',
-        text: 'border-text bg-text text-text hover:opacity-80',
+        text: 'border-text bg-text text-foreground hover:opacity-80',
         custom: '',
       },
       variant: {
-        default: 'rounded-lg text-text-opposite',
+        default: 'rounded-lg text-foreground-opposite',
         none: 'border-none bg-opacity-0 text-inherit hover:bg-opacity-0',
         outline: 'rounded-lg border-[1.3px] bg-opacity-0 hover:bg-opacity-30',
         hoverable:
diff --git a/packages/@intlayer/design-system/src/components/Breadcrumb/index.tsx b/packages/@intlayer/design-system/src/components/Breadcrumb/index.tsx
index d1234cee5e..7362ceb422 100644
--- a/packages/@intlayer/design-system/src/components/Breadcrumb/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Breadcrumb/index.tsx
@@ -59,8 +59,8 @@ const getColorClass = (color?: LinkColor | `${LinkColor}`): string => {
     neutral: 'text-neutral',
     light: 'text-white',
     dark: 'text-neutral-800',
-    text: 'text-text',
-    'text-inverse': 'text-text-opposite',
+    text: 'text-foreground',
+    'text-inverse': 'text-foreground-opposite',
     error: 'text-error',
     success: 'text-success',
     custom: '',
diff --git a/packages/@intlayer/design-system/src/components/Browser/Browser.tsx b/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
index e8f071df8b..6356e5c4ab 100644
--- a/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
+++ b/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
@@ -382,7 +382,7 @@ export const Browser = ({
           className={cn(
             inputVariants(),
             'flex w-full gap-2 rounded-xl p-0.5! supports-[corner-shape:squircle]:rounded-2xl',
-            'bg-neutral/10 text-text/50 placeholder:text-neutral/80'
+            'bg-neutral/10 text-foreground/50 placeholder:text-neutral/80'
           )}
         >
           <label htmlFor="browser-url" className="sr-only">
diff --git a/packages/@intlayer/design-system/src/components/Button/Button.tsx b/packages/@intlayer/design-system/src/components/Button/Button.tsx
index e4041c09e3..e68416f888 100644
--- a/packages/@intlayer/design-system/src/components/Button/Button.tsx
+++ b/packages/@intlayer/design-system/src/components/Button/Button.tsx
@@ -95,20 +95,23 @@ export const buttonVariants = cva(
       },
       color: {
         primary:
-          'hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light',
+          'hover-primary-500/20 text-primary ring-primary-500/20 *:text-foreground-light',
         secondary:
-          'hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light',
-        neutral: 'text-neutral ring-neutral-500/5 *:text-text-light',
-        card: 'hover-card-500/20 text-card ring-card-500/20 *:text-text-light',
-        light: 'hover-white-500/20 text-white ring-white/20 *:text-text-light',
-        dark: 'text-neutral-800 ring-text-light/50 *:text-text-light',
-        text: 'text-text ring-text/20 *:text-text-opposite',
+          'hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-foreground-light',
+        neutral: 'text-neutral ring-neutral-500/5 *:text-foreground-light',
+        card: 'hover-card-500/20 text-card-foreground ring-card-500/20 *:text-foreground-light',
+        light:
+          'hover-white-500/20 text-white ring-white/20 *:text-foreground-light',
+        dark: 'text-neutral-800 ring-text-light/50 *:text-foreground-light',
+        text: 'text-foreground ring-text/20 *:text-foreground-opposite',
         current:
-          'hover-current-500/10 text-current ring-current/10 *:text-text-light',
-        'text-inverse': 'text-text-opposite ring-text-opposite/20 *:text-text',
-        error: 'hover-error-500/20 text-error ring-error/20 *:text-text-light',
+          'hover-current-500/10 text-current ring-current/10 *:text-foreground-light',
+        'text-inverse':
+          'text-foreground-opposite ring-text-opposite/20 *:text-foreground',
+        error:
+          'hover-error-500/20 text-error ring-error/20 *:text-foreground-light',
         success:
-          'hover-success-500/20 text-success ring-success/20 *:text-text-light',
+          'hover-success-500/20 text-success ring-success/20 *:text-foreground-light',
         custom: '',
       },
       roundedSize: {
@@ -159,13 +162,13 @@ export const buttonVariants = cva(
         ],
         input: [
           // base styles
-          'text-text',
+          'text-foreground',
           'w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl',
           'transition-shadow duration-100 md:text-sm',
           'ring-0', // base ring
           'disabled:opacity-50',
 
-          'text-text',
+          'text-foreground',
           'bg-neutral-50 dark:bg-neutral-950',
           'ring-neutral-100 dark:ring-neutral-700',
 
diff --git a/packages/@intlayer/design-system/src/components/CollapsibleTable/CollapsibleTable.tsx b/packages/@intlayer/design-system/src/components/CollapsibleTable/CollapsibleTable.tsx
index 395718bf2f..b78e7c7645 100644
--- a/packages/@intlayer/design-system/src/components/CollapsibleTable/CollapsibleTable.tsx
+++ b/packages/@intlayer/design-system/src/components/CollapsibleTable/CollapsibleTable.tsx
@@ -19,7 +19,7 @@ const collapsibleTableVariants = cva(
         full: 'w-full max-w-none',
       },
       variant: {
-        default: 'border-neutral/20 bg-card',
+        default: 'bg-card',
         dark: 'border-[#B5B5B5] bg-[#242424]',
         ghost: 'border-transparent bg-transparent',
         outlined: 'border-2 border-primary/20 bg-background',
@@ -53,8 +53,8 @@ const headerVariants = cva(
       },
       borderStyle: {
         none: '',
-        dashed: 'border-neutral/20 border-b border-dotted',
-        solid: 'border-neutral/20 border-b border-solid',
+        dashed: 'border-b border-dotted',
+        solid: 'border-b border-solid',
       },
     },
     defaultVariants: {
@@ -259,7 +259,7 @@ export const CollapsibleTable: FC<CollapsibleTableProps> = ({
                   <th
                     key={column}
                     className={cn(
-                      'pb-2 text-left font-medium text-sm text-text/70',
+                      'pb-2 text-left font-medium text-foreground/70 text-sm',
                       thClassName
                     )}
                   >
@@ -281,7 +281,7 @@ export const CollapsibleTable: FC<CollapsibleTableProps> = ({
                     <td
                       key={column}
                       className={cn(
-                        'rounded px-3 py-2 text-sm text-text',
+                        'rounded px-3 py-2 text-foreground text-sm',
                         tdClassName
                       )}
                     >
diff --git a/packages/@intlayer/design-system/src/components/Container/index.tsx b/packages/@intlayer/design-system/src/components/Container/index.tsx
index a6b985226b..7a95845f3a 100644
--- a/packages/@intlayer/design-system/src/components/Container/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Container/index.tsx
@@ -11,90 +11,93 @@ import type {
  * Container component variants using class-variance-authority
  * Provides flexible styling options for background, padding, borders, and layout
  */
-export const containerVariants = cva('flex flex-col text-text backdrop-blur', {
-  variants: {
-    roundedSize: {
-      none: 'rounded-none',
-      sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',
-      md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',
-      lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',
-      xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',
-      '2xl':
-        'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',
-      '3xl':
-        'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',
-      '4xl':
-        'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',
-      full: 'rounded-full',
+export const containerVariants = cva(
+  'flex flex-col text-foreground backdrop-blur',
+  {
+    variants: {
+      roundedSize: {
+        none: 'rounded-none',
+        sm: 'rounded-sm [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-md',
+        md: 'rounded-md [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-lg',
+        lg: 'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',
+        xl: 'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',
+        '2xl':
+          'rounded-2xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl',
+        '3xl':
+          'rounded-3xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl',
+        '4xl':
+          'rounded-4xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[2.5rem]',
+        full: 'rounded-full',
+      },
+      transparency: {
+        none: 'bg-card',
+        xs: 'bg-card/95',
+        sm: 'bg-card/90',
+        md: 'bg-card/70',
+        lg: 'bg-card/40',
+        xl: 'bg-card/20',
+        full: '',
+      },
+      padding: {
+        none: 'p-0',
+        sm: 'px-3 py-2',
+        md: 'px-4 py-3',
+        lg: 'px-6 py-4',
+        xl: 'px-8 py-6',
+        '2xl': 'px-10 py-8',
+      },
+      separator: {
+        without: '',
+        x: 'divide-x divide-dashed divide-text/20',
+        y: 'divide-y divide-dashed divide-text/20',
+        both: 'divide-x divide-y divide-dashed divide-text/20',
+      },
+      border: {
+        none: '',
+        with: 'border-[1.3px]',
+      },
+      borderColor: {
+        primary: 'border-primary',
+        secondary: 'border-secondary',
+        neutral: '',
+        card: 'border-card',
+        text: 'border-text',
+        error: 'border-error',
+        warning: 'border-warning',
+        success: 'border-success',
+      },
+      background: {
+        none: 'backdrop-blur-none',
+        hoverable:
+          'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',
+        with: '',
+      },
+      gap: {
+        none: 'gap-0',
+        sm: 'gap-1',
+        md: 'gap-3',
+        lg: 'gap-5',
+        xl: 'gap-8',
+        '2xl': 'gap-10',
+      },
     },
-    transparency: {
-      none: 'bg-card',
-      xs: 'bg-card/95',
-      sm: 'bg-card/90',
-      md: 'bg-card/70',
-      lg: 'bg-card/40',
-      xl: 'bg-card/20',
-      full: '',
+    defaultVariants: {
+      roundedSize: 'lg',
+      border: 'none',
+      borderColor: 'text',
+      transparency: 'md',
+      padding: 'none',
+      separator: 'without',
+      gap: 'none',
     },
-    padding: {
-      none: 'p-0',
-      sm: 'px-3 py-2',
-      md: 'px-4 py-3',
-      lg: 'px-6 py-4',
-      xl: 'px-8 py-6',
-      '2xl': 'px-10 py-8',
-    },
-    separator: {
-      without: '',
-      x: 'divide-x divide-dashed divide-text/20',
-      y: 'divide-y divide-dashed divide-text/20',
-      both: 'divide-x divide-y divide-dashed divide-text/20',
-    },
-    border: {
-      none: '',
-      with: 'border-[1.3px]',
-    },
-    borderColor: {
-      primary: 'border-primary',
-      secondary: 'border-secondary',
-      neutral: 'border-neutral/20',
-      card: 'border-card',
-      text: 'border-text',
-      error: 'border-error',
-      warning: 'border-warning',
-      success: 'border-success',
-    },
-    background: {
-      none: 'backdrop-blur-none',
-      hoverable:
-        'bg-opacity-5! backdrop-blur-0 hover:bg-opacity-10! hover:backdrop-blur focus:bg-opacity-10! focus:backdrop-blur aria-selected:bg-opacity-15! aria-selected:backdrop-blur',
-      with: '',
-    },
-    gap: {
-      none: 'gap-0',
-      sm: 'gap-1',
-      md: 'gap-3',
-      lg: 'gap-5',
-      xl: 'gap-8',
-      '2xl': 'gap-10',
-    },
-  },
-  defaultVariants: {
-    roundedSize: 'lg',
-    border: 'none',
-    borderColor: 'text',
-    transparency: 'md',
-    padding: 'none',
-    separator: 'without',
-    gap: 'none',
-  },
-  compoundVariants: [
-    {
-      background: 'none',
-      class: 'bg-transparent',
-    },
-  ],
-});
+    compoundVariants: [
+      {
+        background: 'none',
+        class: 'bg-transparent',
+      },
+    ],
+  }
+);
 
 /** Available rounded corner sizes for the container */
 export type ContainerRoundedSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
diff --git a/packages/@intlayer/design-system/src/components/DictionaryEditor/ItemLayout.tsx b/packages/@intlayer/design-system/src/components/DictionaryEditor/ItemLayout.tsx
index 66b15db220..c07d87dc62 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryEditor/ItemLayout.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryEditor/ItemLayout.tsx
@@ -53,7 +53,7 @@ export const ItemLayout: FC<ItemWrapperProps> = ({
             )}
           </div>
           {description && (
-            <p className="pl-3 text-card text-sm">{description}</p>
+            <p className="pl-3 text-card-foreground text-sm">{description}</p>
           )}
         </div>
       }
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditor.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditor.tsx
index 74dfa7f846..5ebaebfd49 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditor.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditor.tsx
@@ -166,7 +166,7 @@ export const ContentEditor: FC<NodeEditorProps> = ({ dictionary }) => {
                     onClick={() => !isActive && switchSibling(sibling)}
                     className={`rounded-lg px-3 py-1 text-xs transition-colors ${
                       isActive
-                        ? 'bg-text font-semibold text-text-opposite'
+                        ? 'bg-text font-semibold text-foreground-opposite'
                         : 'cursor-pointer border border-border hover:bg-text/10'
                     }`}
                   >
@@ -176,7 +176,7 @@ export const ContentEditor: FC<NodeEditorProps> = ({ dictionary }) => {
               })}
               {currentVariant !== undefined &&
                 !variantDicts.some((d) => d.localId === dictionary.localId) && (
-                  <span className="rounded-lg bg-text px-3 py-1 font-semibold text-text-opposite text-xs">
+                  <span className="rounded-lg bg-text px-3 py-1 font-semibold text-foreground-opposite text-xs">
                     {formatVariant(currentVariant)}
                   </span>
                 )}
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx
index e432c25805..58e9a42898 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.tsx
@@ -785,7 +785,7 @@ export const DictionaryDetailsForm: FC<DictionaryDetailsProps> = ({
                       className={cn(
                         'rounded-lg px-3 py-1 text-xs transition-colors',
                         isActive
-                          ? 'bg-text font-semibold text-text-opposite'
+                          ? 'bg-text font-semibold text-foreground-opposite'
                           : 'cursor-pointer border border-border hover:bg-text/10'
                       )}
                     >
@@ -813,7 +813,7 @@ export const DictionaryDetailsForm: FC<DictionaryDetailsProps> = ({
                       className={cn(
                         'rounded-lg px-3 py-1 text-xs transition-colors',
                         isActive
-                          ? 'bg-text font-semibold text-text-opposite'
+                          ? 'bg-text font-semibold text-foreground-opposite'
                           : 'cursor-pointer border border-border hover:bg-text/10'
                       )}
                     >
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx
index 6f851f96d5..6a7d5a0fc2 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx
@@ -26,7 +26,7 @@ export const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {
 
   return (
     <div
-      className="rounded-xl border border-text text-text transition-colors"
+      className="rounded-xl border border-text text-foreground transition-colors"
       aria-label={versionListLabel.value}
     >
       <DropDown identifier={DROPDOWN_IDENTIFIER}>
diff --git a/packages/@intlayer/design-system/src/components/Footer/index.tsx b/packages/@intlayer/design-system/src/components/Footer/index.tsx
index 25189a80e1..666d9c9e03 100644
--- a/packages/@intlayer/design-system/src/components/Footer/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Footer/index.tsx
@@ -122,7 +122,7 @@ type FooterProps = {
  * @returns A rendered footer with branding, social links, and optional navigation links
  */
 export const Footer: FC<FooterProps> = ({ links, footerText }) => (
-  <footer className="flex flex-auto flex-row flex-wrap items-center justify-around gap-10 p-6">
+  <footer className="flex flex-auto flex-row flex-wrap items-center justify-around gap-10 border-t p-6">
     <aside className="flex flex-col items-center justify-between gap-3 md:w-1/4">
       <LogoWithTextBelow className="size-full max-w-30" />
       <span className="text-center text-neutral text-xs">
diff --git a/packages/@intlayer/design-system/src/components/Input/Checkbox.tsx b/packages/@intlayer/design-system/src/components/Input/Checkbox.tsx
index c5efbb6bba..af5564dba7 100644
--- a/packages/@intlayer/design-system/src/components/Input/Checkbox.tsx
+++ b/packages/@intlayer/design-system/src/components/Input/Checkbox.tsx
@@ -23,7 +23,7 @@ export const checkboxVariants = cva(
     // centered custom checkmark with text-opposite color
     "checked:before:absolute checked:before:inset-0 checked:before:content-['✓']",
     'checked:before:flex checked:before:items-center checked:before:justify-center',
-    'checked:before:text-text-opposite/80',
+    'checked:before:text-foreground-opposite/80',
 
     // Corner shape
     'rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl',
@@ -50,9 +50,9 @@ export const checkboxVariants = cva(
           'border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral',
         light:
           'border-white/30 text-white ring-white/20 checked:border-white checked:bg-white',
-        text: 'border-text/30 text-text ring-text/20 checked:border-text checked:bg-text',
+        text: 'border-text/30 text-foreground ring-text/20 checked:border-text checked:bg-text',
         'text-inverse':
-          'border-text-inverse/30 text-text-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',
+          'border-text-inverse/30 text-foreground-inverse ring-text-inverse/20 checked:border-text-inverse checked:bg-text-inverse',
         dark: 'border-neutral-800/30 text-neutral-800 ring-neutral-800/20 checked:border-neutral-800 checked:bg-neutral-800',
         error:
           'border-error/30 text-error ring-error/20 checked:border-error checked:bg-error',
diff --git a/packages/@intlayer/design-system/src/components/Input/Input.tsx b/packages/@intlayer/design-system/src/components/Input/Input.tsx
index 5a4c500801..dd746fbda8 100644
--- a/packages/@intlayer/design-system/src/components/Input/Input.tsx
+++ b/packages/@intlayer/design-system/src/components/Input/Input.tsx
@@ -20,7 +20,7 @@ export const inputVariants = cva(
     variants: {
       variant: {
         default: [
-          'text-text',
+          'text-foreground',
           'bg-neutral-50 dark:bg-neutral-950',
           'ring-text/20',
 
diff --git a/packages/@intlayer/design-system/src/components/Input/OTPInput.tsx b/packages/@intlayer/design-system/src/components/Input/OTPInput.tsx
index 09fa706ee0..7d298b34c1 100644
--- a/packages/@intlayer/design-system/src/components/Input/OTPInput.tsx
+++ b/packages/@intlayer/design-system/src/components/Input/OTPInput.tsx
@@ -894,7 +894,7 @@ export const InputOTPSlot: FC<InputOTPSlotProps> = ({
 export const InputOTPSeparator: FC<ComponentProps<'div'>> = (props) => (
   <div
     aria-hidden
-    className="z-0 table h-0.5 w-3 rounded-full text-text/50"
+    className="z-0 table h-0.5 w-3 rounded-full text-foreground/50"
     {...props}
   >
     <MinusIcon />
diff --git a/packages/@intlayer/design-system/src/components/KeyboardShortcut/KeyboardShortcut.tsx b/packages/@intlayer/design-system/src/components/KeyboardShortcut/KeyboardShortcut.tsx
index 8b275b2217..9b3edcfabf 100644
--- a/packages/@intlayer/design-system/src/components/KeyboardShortcut/KeyboardShortcut.tsx
+++ b/packages/@intlayer/design-system/src/components/KeyboardShortcut/KeyboardShortcut.tsx
@@ -298,7 +298,7 @@ export const KeyboardShortcut: FC<KeyboardShortcutProps> = ({
         'inline-flex items-center justify-center gap-0.5 p-0.5',
         'rounded-lg [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl',
         'font-medium font-sans',
-        'border-1 border-neutral/20 text-neutral',
+        'border-1 text-neutral',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',
         size === 'lg' && 'text-base',
@@ -314,7 +314,7 @@ export const KeyboardShortcut: FC<KeyboardShortcutProps> = ({
             <span
               className={cn(
                 'min-w-4 px-0.5 text-center',
-                isKeyPressed(key) && 'scale-120 font-bold text-text'
+                isKeyPressed(key) && 'scale-120 font-bold text-foreground'
               )}
               suppressHydrationWarning
             >
diff --git a/packages/@intlayer/design-system/src/components/Link/Link.tsx b/packages/@intlayer/design-system/src/components/Link/Link.tsx
index 486a6e92e0..f4a5fa7ba4 100644
--- a/packages/@intlayer/design-system/src/components/Link/Link.tsx
+++ b/packages/@intlayer/design-system/src/components/Link/Link.tsx
@@ -58,10 +58,10 @@ export const linkVariants = cva(
           'h-auto justify-start border-inherit bg-current/0 px-1',
 
         button:
-          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current px-6 text-center font-medium text-sm text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
+          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current px-6 text-center font-medium text-foreground text-sm ring-0 *:text-foreground-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
 
         'button-outlined':
-          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current px-6 text-center font-medium text-sm text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
+          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current px-6 text-center font-medium text-foreground text-sm ring-0 *:text-foreground hover:bg-current/20 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
 
         hoverable:
           'rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/10 aria-[current]:bg-current/5',
@@ -84,8 +84,8 @@ export const linkVariants = cva(
         neutral: 'text-neutral',
         light: 'text-white',
         dark: 'text-neutral-800',
-        text: 'text-text',
-        'text-inverse': 'text-text-opposite',
+        text: 'text-foreground',
+        'text-inverse': 'text-foreground-opposite',
         error: 'text-error',
         success: 'text-success',
         custom: '',
@@ -111,10 +111,10 @@ export const linkVariants = cva(
       {
         // Filled Button + Inverse Color (e.g., White Button):
         // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).
-        // We ONLY override children to be 'text-text' (Dark) so they show up on white.
+        // We ONLY override children to be 'text-foreground' (Dark) so they show up on white.
         variant: 'button',
         color: 'text-inverse',
-        class: '*:text-text',
+        class: '*:text-foreground',
       },
       {
         // Outlined Button + Inverse Color (e.g., White Border):
@@ -122,7 +122,7 @@ export const linkVariants = cva(
         // Children must also be 'text-opposite' (White text) to show on dark background.
         variant: 'button-outlined',
         color: 'text-inverse',
-        class: 'text-text-opposite *:text-text-opposite',
+        class: 'text-foreground-opposite *:text-foreground-opposite',
       },
 
       // Min height and padding for button variants
diff --git a/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx b/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
index 7587d2ae5d..5522d3f558 100644
--- a/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
+++ b/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
@@ -117,7 +117,7 @@ export const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({
   };
 
   return (
-    <div className="rounded-xl border border-text text-text transition-colors">
+    <div className="rounded-xl border border-text text-foreground transition-colors">
       <DropDown identifier={DROPDOWN_IDENTIFIER}>
         <DropDown.Trigger
           identifier={DROPDOWN_IDENTIFIER}
@@ -127,7 +127,7 @@ export const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({
           color="text"
           variant="hoverable"
         >
-          <div className="flex w-full items-center justify-between text-text">
+          <div className="flex w-full items-center justify-between text-foreground">
             <div className="px-2 py-1">
               <Globe size={16} />
             </div>
diff --git a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownIframe.tsx b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownIframe.tsx
index 1e8648cc21..22b51f1ed9 100644
--- a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownIframe.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownIframe.tsx
@@ -206,7 +206,7 @@ export const MarkDownIframe: FC<ComponentProps<'iframe'>> = (props) => {
             rel="noopener noreferrer"
             label=""
             color="neutral"
-            className="inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-neutral text-xs underline-offset-2 hover:text-text hover:underline"
+            className="inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-neutral text-xs underline-offset-2 hover:text-foreground hover:underline"
           >
             {label}
           </Link>
diff --git a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
index bf20b725cb..207b94ecc9 100644
--- a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
@@ -21,25 +21,25 @@ export type { ParsedMarkdown };
 
 // Extracted, stable component renderers
 const H1Renderer = (props: ComponentProps<'h1'>) => (
-  <H1 isClickable className="mb-16 mb-8 text-text" {...props} />
+  <H1 isClickable className="mb-16 mb-8 text-foreground" {...props} />
 );
 const H2Renderer = (props: ComponentProps<'h2'>) => (
-  <H2 isClickable className="mt-16 text-text" {...props} />
+  <H2 isClickable className="mt-16 text-foreground" {...props} />
 );
 const H3Renderer = (props: ComponentProps<'h3'>) => (
-  <H3 isClickable className="mt-5 text-text" {...props} />
+  <H3 isClickable className="mt-5 text-foreground" {...props} />
 );
 const H4Renderer = (props: ComponentProps<'h4'>) => (
-  <H4 isClickable className="mt-3 text-text" {...props} />
+  <H4 isClickable className="mt-3 text-foreground" {...props} />
 );
 const H5Renderer = (props: ComponentProps<'h5'>) => (
-  <H5 isClickable className="mt-3 text-text" {...props} />
+  <H5 isClickable className="mt-3 text-foreground" {...props} />
 );
 const H6Renderer = (props: ComponentProps<'h6'>) => (
-  <H6 isClickable className="mt-3 text-text" {...props} />
+  <H6 isClickable className="mt-3 text-foreground" {...props} />
 );
 const StrongRenderer = (props: ComponentProps<'strong'>) => (
-  <strong className="text-text" {...props} />
+  <strong className="text-foreground" {...props} />
 );
 
 const MemoizedCodeBlock = memo(
diff --git a/packages/@intlayer/design-system/src/components/MarkdownEditor/MarkdownEditor.tsx b/packages/@intlayer/design-system/src/components/MarkdownEditor/MarkdownEditor.tsx
index 9e707c3a42..e7d5783b4c 100644
--- a/packages/@intlayer/design-system/src/components/MarkdownEditor/MarkdownEditor.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkdownEditor/MarkdownEditor.tsx
@@ -133,7 +133,7 @@ export const MarkdownEditor: FC<MarkdownEditorProps> = ({
           onUpdate={handleUpdate}
           slotAfter={<ImageResizer />}
         >
-          <EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-lg border border-neutral/20 bg-card px-1 py-2 text-text shadow-xl transition-all">
+          <EditorCommand className="z-50 h-auto max-h-[330px] overflow-y-auto rounded-lg border bg-card px-1 py-2 text-foreground shadow-xl transition-all">
             <EditorCommandEmpty className="px-2 text-muted-foreground">
               {content.noResults.value}
             </EditorCommandEmpty>
@@ -166,7 +166,7 @@ export const MarkdownEditor: FC<MarkdownEditorProps> = ({
           ) : (
             <EditorBubble
               options={{ placement: 'top' }}
-              className="flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl"
+              className="flex w-fit max-w-[90vw] rounded-lg border-[1.3px] bg-card/95 text-foreground shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl"
             >
               {toolbar}
             </EditorBubble>
diff --git a/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/AISelector.tsx b/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/AISelector.tsx
index 61376150b6..32dddcf411 100644
--- a/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/AISelector.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/AISelector.tsx
@@ -71,7 +71,7 @@ export const AISelector = ({
       )}
 
       {isLoading && (
-        <div className="flex h-12 w-full items-center px-4 font-medium text-sm text-text">
+        <div className="flex h-12 w-full items-center px-4 font-medium text-foreground text-sm">
           <Sparkles className="mr-2 size-4 shrink-0" />
           {content.aiThinking}
           <div className="mt-1 ml-2">
diff --git a/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/AISelectorCommands.tsx b/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/AISelectorCommands.tsx
index d740c3951e..772290738e 100644
--- a/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/AISelectorCommands.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/AISelectorCommands.tsx
@@ -68,7 +68,7 @@ export const AISelectorCommands = ({ onSelect }: AISelectorCommandsProps) => {
               onSelect(text, value as AICompletionOption);
             }}
           >
-            <option.icon className="size-4 text-text" />
+            <option.icon className="size-4 text-foreground" />
             {getOptionLabel(option.value)}
           </Command.Item>
         ))}
@@ -84,7 +84,7 @@ export const AISelectorCommands = ({ onSelect }: AISelectorCommandsProps) => {
             onSelect(text, 'continue');
           }}
         >
-          <StepForward className="size-4 text-text" />
+          <StepForward className="size-4 text-foreground" />
           {content.continueWriting}
         </Command.Item>
       </Command.Group>
diff --git a/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx b/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx
index b5160ba6ae..a0354ba4ee 100644
--- a/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkdownEditor/generative/GenerativeMenuSwitch.tsx
@@ -42,7 +42,7 @@ export const GenerativeMenuSwitch = ({
   return (
     <EditorBubble
       options={{ placement: open ? 'bottom-start' : 'top' }}
-      className="flex w-fit max-w-[90vw] rounded-lg border-[1.3px] border-neutral/20 bg-card/95 text-text shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl"
+      className="flex w-fit max-w-[90vw] rounded-lg border-[1.3px] bg-card/95 text-foreground shadow-xl backdrop-blur [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-xl"
     >
       {open && (
         <AISelector
@@ -59,7 +59,7 @@ export const GenerativeMenuSwitch = ({
             color="text"
             size="sm"
             roundedSize="none"
-            className="gap-1 text-text"
+            className="gap-1 text-foreground"
             Icon={Sparkles}
             onClick={() => onOpenChange(true)}
           >
diff --git a/packages/@intlayer/design-system/src/components/MarkdownEditor/markdown-editor.css b/packages/@intlayer/design-system/src/components/MarkdownEditor/markdown-editor.css
index 9742ae94e7..efa1df911b 100644
--- a/packages/@intlayer/design-system/src/components/MarkdownEditor/markdown-editor.css
+++ b/packages/@intlayer/design-system/src/components/MarkdownEditor/markdown-editor.css
@@ -3,14 +3,14 @@
  *
  * Exposed via the `@intlayer/design-system/markdown-editor.css` export and
  * imported only by consumers that actually use the editor (currently the
- * `apps/app` CMS dashboard), rather than from the shared `tailwind.css`
+ * `apps/app` CMS dashboard), rather than from the shared `styles/globals.css`
  * entry — this keeps the ProseMirror specific rules (placeholder, task
  * checkboxes, image placeholder, drag handle) out of every other consumer's
  * CSS bundle.
  */
 
 :root,
-[data-theme="light"] {
+[data-theme='light'] {
   --novel-highlight-default: #ffffff;
   --novel-highlight-purple: #f6f3f8;
   --novel-highlight-red: #fdebeb;
@@ -27,7 +27,7 @@
   --novel-stone-800: rgba(69, 69, 69);
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --novel-highlight-default: #000000;
   --novel-highlight-purple: #3f2c4b;
   --novel-highlight-red: #5c1a1a;
@@ -132,7 +132,7 @@
 }
 
 .img-placeholder::before {
-  content: "";
+  content: '';
   box-sizing: border-box;
   position: absolute;
   top: 50%;
@@ -152,23 +152,23 @@
 }
 
 /* Task list checkboxes */
-ul[data-type="taskList"] {
+ul[data-type='taskList'] {
   list-style: none;
   padding: 0;
 }
 
-ul[data-type="taskList"] li > label {
+ul[data-type='taskList'] li > label {
   margin-right: 0.2rem;
   user-select: none;
 }
 
 @media screen and (max-width: 768px) {
-  ul[data-type="taskList"] li > label {
+  ul[data-type='taskList'] li > label {
     margin-right: 0.5rem;
   }
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"] {
+ul[data-type='taskList'] li > label input[type='checkbox'] {
   -webkit-appearance: none;
   appearance: none;
   background-color: var(--background);
@@ -184,16 +184,16 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   place-content: center;
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
+ul[data-type='taskList'] li > label input[type='checkbox']:hover {
   background-color: var(--accent);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]:active {
+ul[data-type='taskList'] li > label input[type='checkbox']:active {
   background-color: var(--accent);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]::before {
-  content: "";
+ul[data-type='taskList'] li > label input[type='checkbox']::before {
+  content: '';
   width: 0.65em;
   height: 0.65em;
   transform: scale(0);
@@ -203,11 +203,11 @@ ul[data-type="taskList"] li > label input[type="checkbox"]::before {
   clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]:checked::before {
+ul[data-type='taskList'] li > label input[type='checkbox']:checked::before {
   transform: scale(1);
 }
 
-ul[data-type="taskList"] li[data-checked="true"] > div > p {
+ul[data-type='taskList'] li[data-checked='true'] > div > p {
   color: var(--muted-foreground);
   text-decoration: line-through;
   text-decoration-thickness: 2px;
@@ -260,7 +260,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   }
 }
 
-[data-theme="dark"] .drag-handle {
+[data-theme='dark'] .drag-handle {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='fill: rgba(255, 255, 255, 0.5)'%3E%3Cpath d='M3,2 C2.44771525,2 2,1.55228475 2,1 C2,0.44771525 2.44771525,0 3,0 C3.55228475,0 4,0.44771525 4,1 C4,1.55228475 3.55228475,2 3,2 Z M3,6 C2.44771525,6 2,5.55228475 2,5 C2,4.44771525 2.44771525,4 3,4 C3.55228475,4 4,4.44771525 4,5 C4,5.55228475 3.55228475,6 3,6 Z M3,10 C2.44771525,10 2,9.55228475 2,9 C2,8.44771525 2.44771525,8 3,8 C3.55228475,8 4,8.44771525 4,9 C4,9.55228475 3.55228475,10 3,10 Z M7,2 C6.44771525,2 6,1.55228475 6,1 C6,0.44771525 6.44771525,0 7,0 C7.55228475,0 8,0.44771525 8,1 C8,1.55228475 7.55228475,2 7,2 Z M7,6 C6.44771525,6 6,5.55228475 6,5 C6,4.44771525 6.44771525,4 7,4 C7.55228475,4 8,4.44771525 8,5 C8,5.55228475 7.55228475,6 7,6 Z M7,10 C6.44771525,10 6,9.55228475 6,9 C6,8.44771525 6.44771525,8 7,8 C7.55228475,8 8,8.44771525 8,9 C8,9.55228475 7.55228475,10 7,10 Z'%3E%3C/path%3E%3C/svg%3E");
 }
 
@@ -274,7 +274,7 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
   background-color: var(--muted) !important;
 }
 
-[data-theme="dark"] .ProseMirror pre.shiki span {
+[data-theme='dark'] .ProseMirror pre.shiki span {
   /* biome-ignore lint/complexity/noImportantStyles: override shiki inline token color with the dark-theme variable */
   color: var(--shiki-dark, inherit) !important;
 }
diff --git a/packages/@intlayer/design-system/src/components/Navbar/MobileNavbar.tsx b/packages/@intlayer/design-system/src/components/Navbar/MobileNavbar.tsx
index a327bf6f19..ae144ac952 100644
--- a/packages/@intlayer/design-system/src/components/Navbar/MobileNavbar.tsx
+++ b/packages/@intlayer/design-system/src/components/Navbar/MobileNavbar.tsx
@@ -234,7 +234,7 @@ export const MobileNavbar = <T extends TabSelectorItemProps>({
       >
         <MaxHeightSmoother isHidden={!isUnrolled}>
           <m.div
-            className="flex w-full flex-col pt-10 pb-[20%] text-lg text-text tracking-wide"
+            className="flex w-full flex-col pt-10 pb-[20%] text-foreground text-lg tracking-wide"
             onClick={() => setIsUnrolled(false)}
             animate={isUnrolled ? 'open' : 'closed'}
             variants={navVariants}
diff --git a/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.stories.tsx b/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.stories.tsx
index 731e0f5ef4..6c4287db71 100644
--- a/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.stories.tsx
+++ b/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.stories.tsx
@@ -133,7 +133,7 @@ export const Default: Story = {
     const { open } = useRightDrawer();
 
     return (
-      <div className="min-h-screen bg-background text-text">
+      <div className="min-h-screen bg-background text-foreground">
         <div className="p-6">
           <button
             type="button"
@@ -215,7 +215,7 @@ export const WithBackButton: Story = {
     const { open } = useRightDrawer();
 
     return (
-      <div className="min-h-screen bg-background text-text">
+      <div className="min-h-screen bg-background text-foreground">
         <div className="p-6">
           <button
             type="button"
@@ -318,7 +318,7 @@ export const Controlled: Story = {
     };
 
     return (
-      <div className="min-h-screen bg-background text-text">
+      <div className="min-h-screen bg-background text-foreground">
         <div className="p-6">
           <div className="space-y-4">
             <button
@@ -461,7 +461,7 @@ export const NoOutsideClose: Story = {
     const { open } = useRightDrawer();
 
     return (
-      <div className="min-h-screen bg-background text-text">
+      <div className="min-h-screen bg-background text-foreground">
         <div className="p-6">
           <button
             type="button"
@@ -590,7 +590,7 @@ export const MultipleDrawers: Story = {
     const { open, close, isOpen } = useRightDrawer();
 
     return (
-      <div className="min-h-screen bg-background text-text">
+      <div className="min-h-screen bg-background text-foreground">
         <div className="p-6">
           <div className="space-y-4">
             <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
diff --git a/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.tsx b/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.tsx
index 7e7a755b35..5c91eb051c 100644
--- a/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.tsx
+++ b/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.tsx
@@ -223,7 +223,7 @@ export const RightDrawer: FC<RightDrawerProps> = ({
     <div className="fixed top-0 right-0 z-50 flex h-full justify-end">
       <MaxWidthSmoother isHidden={!isVisuallyOpen} align="right">
         <Container
-          className="relative flex h-screen w-screen flex-col border-l text-text md:w-100"
+          className="relative flex h-screen w-screen flex-col border-l text-foreground md:w-100"
           ref={panelRef}
           roundedSize="none"
           borderColor="neutral"
diff --git a/packages/@intlayer/design-system/src/components/Select/Multiselect.tsx b/packages/@intlayer/design-system/src/components/Select/Multiselect.tsx
index 89c8a2f539..09e3eabfe6 100644
--- a/packages/@intlayer/design-system/src/components/Select/Multiselect.tsx
+++ b/packages/@intlayer/design-system/src/components/Select/Multiselect.tsx
@@ -439,7 +439,7 @@ const MultiSelectTrigger: FC<
 
         // Background and text
         'bg-neutral-50 dark:bg-neutral-950',
-        'text-text',
+        'text-foreground',
 
         // Focus ring
         'ring-0',
@@ -545,7 +545,7 @@ const MultiSelectList: typeof Command.List = ({ className, children }) => (
 
       // Background and text
       'bg-white dark:bg-neutral-950',
-      'text-text',
+      'text-foreground',
 
       // Border
       'border border-neutral-200 dark:border-neutral-800',
diff --git a/packages/@intlayer/design-system/src/components/Select/Select.tsx b/packages/@intlayer/design-system/src/components/Select/Select.tsx
index 9f109f5d39..3710a7d546 100644
--- a/packages/@intlayer/design-system/src/components/Select/Select.tsx
+++ b/packages/@intlayer/design-system/src/components/Select/Select.tsx
@@ -68,7 +68,7 @@ const SelectTrigger: FC<
 
       // Background and text
       'bg-neutral-50 dark:bg-neutral-950',
-      'text-text',
+      'text-foreground',
 
       // Focus ring
       'ring-0',
@@ -176,7 +176,7 @@ export const SelectContent: FC<
 
         // Background and text
         'bg-white dark:bg-neutral-950',
-        'text-text',
+        'text-foreground',
 
         // Border
         'border border-neutral-200 dark:border-neutral-800',
diff --git a/packages/@intlayer/design-system/src/components/Steps/index.tsx b/packages/@intlayer/design-system/src/components/Steps/index.tsx
index aabe6a1a36..0f06dfd678 100644
--- a/packages/@intlayer/design-system/src/components/Steps/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Steps/index.tsx
@@ -36,7 +36,7 @@ export const Step: FC<StepProps> = ({
         <div className="ml-4 h-10 border-text/20 border-l border-dashed group-first-of-type:hidden" />
         <span
           className={cn(
-            'flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-base text-text/70 max-md:hidden',
+            'flex size-8 shrink-0 items-center justify-center rounded-full border-2 border-text/30 border-dotted bg-background font-black text-base text-foreground/70 max-md:hidden',
             'group-first-of-type:mt-10'
           )}
         >
@@ -57,12 +57,12 @@ export const Step: FC<StepProps> = ({
               isClickable
               id={`step-${number}-${slugify(title)}`}
               aria-label={`${stepLabel} ${number}: ${title}`}
-              className="font-semibold text-lg text-text"
+              className="font-semibold text-foreground text-lg"
             >
               {title}
             </H3>
             {isOptional && (
-              <span className="mb-2 ml-4 rounded-full bg-neutral/15 px-3 py-1 text-text/90 text-xs">
+              <span className="mb-2 ml-4 rounded-full bg-neutral/15 px-3 py-1 text-foreground/90 text-xs">
                 {optionalLabel}
               </span>
             )}
diff --git a/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx b/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
index a0f24b6f18..f70ea25ebf 100644
--- a/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
+++ b/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
@@ -52,7 +52,7 @@ export const switchSelectorVariant = cva(
         neutral: 'border-neutral text-neutral',
         light: 'border-white text-white',
         dark: 'border-neutral-800 text-neutral-800',
-        text: 'border-text text-text',
+        text: 'border-text text-foreground',
       },
       disabled: {
         true: 'cursor-not-allowed opacity-50',
@@ -67,7 +67,7 @@ export const switchSelectorVariant = cva(
 );
 
 export const choiceVariant = cva(
-  'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',
+  'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-foreground-opposite motion-reduce:transition-none',
   {
     variants: {
       size: {
@@ -88,13 +88,13 @@ export const indicatorVariant = cva(
   {
     variants: {
       color: {
-        primary: 'bg-primary data-[indicator=true]:text-text',
-        secondary: 'bg-secondary data-[indicator=true]:text-text',
-        error: 'bg-error data-[indicator=true]:text-text',
+        primary: 'bg-primary data-[indicator=true]:text-foreground',
+        secondary: 'bg-secondary data-[indicator=true]:text-foreground',
+        error: 'bg-error data-[indicator=true]:text-foreground',
         neutral: 'bg-neutral data-[indicator=true]:text-white',
         light: 'bg-white data-[indicator=true]:text-black',
         dark: 'bg-neutral-800 data-[indicator=true]:text-white',
-        text: 'bg-text data-[indicator=true]:text-text-opposite',
+        text: 'bg-text data-[indicator=true]:text-foreground-opposite',
       },
     },
   }
diff --git a/packages/@intlayer/design-system/src/components/SwitchSelector/VerticalSwitchSelector.tsx b/packages/@intlayer/design-system/src/components/SwitchSelector/VerticalSwitchSelector.tsx
index a1240353dc..1bb0c42b0a 100644
--- a/packages/@intlayer/design-system/src/components/SwitchSelector/VerticalSwitchSelector.tsx
+++ b/packages/@intlayer/design-system/src/components/SwitchSelector/VerticalSwitchSelector.tsx
@@ -20,7 +20,7 @@ const verticalSwitchSelectorVariant = cva(
         neutral: 'border-neutral text-neutral',
         light: 'border-white text-white',
         dark: 'border-neutral-800 text-neutral-800',
-        text: 'border-text text-text',
+        text: 'border-text text-foreground',
       },
       disabled: {
         true: 'cursor-not-allowed opacity-50',
@@ -35,7 +35,7 @@ const verticalSwitchSelectorVariant = cva(
 );
 
 const verticalChoiceVariant = cva(
-  'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-text-opposite motion-reduce:transition-none',
+  'z-1 w-full cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-foreground-opposite motion-reduce:transition-none',
   {
     variants: {
       size: {
@@ -55,13 +55,13 @@ const verticalIndicatorVariant = cva(
   {
     variants: {
       color: {
-        primary: 'bg-primary data-[indicator=true]:text-text',
-        secondary: 'bg-secondary data-[indicator=true]:text-text',
-        [`${'error'}`]: 'bg-error data-[indicator=true]:text-text',
+        primary: 'bg-primary data-[indicator=true]:text-foreground',
+        secondary: 'bg-secondary data-[indicator=true]:text-foreground',
+        [`${'error'}`]: 'bg-error data-[indicator=true]:text-foreground',
         neutral: 'bg-neutral data-[indicator=true]:text-white',
         light: 'bg-white data-[indicator=true]:text-black',
         dark: 'bg-neutral-800 data-[indicator=true]:text-white',
-        text: 'bg-text data-[indicator=true]:text-text-opposite',
+        text: 'bg-text data-[indicator=true]:text-foreground-opposite',
       },
     },
   }
diff --git a/packages/@intlayer/design-system/src/components/Tab/Tab.tsx b/packages/@intlayer/design-system/src/components/Tab/Tab.tsx
index dba5d1aeb2..e08a0c80e4 100644
--- a/packages/@intlayer/design-system/src/components/Tab/Tab.tsx
+++ b/packages/@intlayer/design-system/src/components/Tab/Tab.tsx
@@ -62,7 +62,7 @@ const TabContext = createContext<TabContextType | undefined>(undefined);
 const tabContainerVariant = cva('relative w-full rounded-lg', {
   variants: {
     background: {
-      with: 'border border-neutral/20 bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',
+      with: 'border bg-background/2 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur',
       without: '',
     },
     variant: {
diff --git a/packages/@intlayer/design-system/src/components/TabSelector/TabSelector.tsx b/packages/@intlayer/design-system/src/components/TabSelector/TabSelector.tsx
index 82b79014dd..f9c5d105ad 100644
--- a/packages/@intlayer/design-system/src/components/TabSelector/TabSelector.tsx
+++ b/packages/@intlayer/design-system/src/components/TabSelector/TabSelector.tsx
@@ -35,7 +35,7 @@ const tabSelectorVariant = cva(
         neutral: 'border-neutral text-neutral',
         light: 'border-white text-white',
         dark: 'border-neutral-800 text-neutral-800',
-        text: 'border-text text-text',
+        text: 'border-text text-foreground',
       },
     },
     defaultVariants: {
@@ -49,13 +49,13 @@ const indicatorVariant = cva(
   {
     variants: {
       color: {
-        primary: 'bg-primary/10 aria-selected:text-text',
-        secondary: 'bg-secondary/10 aria-selected:text-text',
-        error: 'bg-error/10 aria-selected:text-text',
+        primary: 'bg-primary/10 aria-selected:text-foreground',
+        secondary: 'bg-secondary/10 aria-selected:text-foreground',
+        error: 'bg-error/10 aria-selected:text-foreground',
         neutral: 'bg-neutral/10 aria-selected:text-white/10',
         light: 'bg-white/10 aria-selected:text-black',
         dark: 'bg-neutral-800/10 aria-selected:text-white',
-        text: 'bg-text/10 aria-selected:text-text-opposite',
+        text: 'bg-text/10 aria-selected:text-foreground-opposite',
       },
       orientation: {
         horizontal: 'top-0 h-full w-auto transition-[left,width]',
diff --git a/packages/@intlayer/design-system/src/components/Table/TableElements.tsx b/packages/@intlayer/design-system/src/components/Table/TableElements.tsx
index 57dcd8e8d0..8f61327604 100644
--- a/packages/@intlayer/design-system/src/components/Table/TableElements.tsx
+++ b/packages/@intlayer/design-system/src/components/Table/TableElements.tsx
@@ -3,10 +3,7 @@ import type { ComponentProps } from 'react';
 
 export const Th = ({ className, ...props }: ComponentProps<'th'>) => (
   <th
-    className={cn(
-      'border border-neutral/20 border-b border-solid bg-neutral/10 p-4',
-      className
-    )}
+    className={cn('border border-b border-solid bg-neutral/10 p-4', className)}
     {...props}
   />
 );
@@ -17,10 +14,7 @@ export const Tr = ({ className, ...props }: ComponentProps<'tr'>) => (
 
 export const Td = ({ className, ...props }: ComponentProps<'td'>) => (
   <td
-    className={cn(
-      'border border-neutral/20 border-b border-solid p-4',
-      className
-    )}
+    className={cn('border border-b border-solid p-4', className)}
     {...props}
   />
 );
diff --git a/packages/@intlayer/design-system/src/components/Tag/index.tsx b/packages/@intlayer/design-system/src/components/Tag/index.tsx
index 541ae523ac..ee34274405 100644
--- a/packages/@intlayer/design-system/src/components/Tag/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Tag/index.tsx
@@ -193,7 +193,7 @@ const containerVariants = cva('w-fit backdrop-blur', {
       error: 'border-error bg-error/10 text-error',
       warning: 'border-warning bg-warning/10 text-warning',
       neutral: '/10 border-neutral bg-neutral/10 text-neutral',
-      text: 'border-text bg-text/10 text-text',
+      text: 'border-text bg-text/10 text-foreground',
       black: 'border-black bg-black/10 text-black',
       white: 'border-white bg-white/10 text-white',
     },
diff --git a/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx b/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
index 5844328b0c..f910fc92a0 100644
--- a/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
+++ b/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
@@ -130,7 +130,7 @@ export const Terminal: FC<TerminalProps> = ({
               <button
                 type="button"
                 onClick={onClose}
-                className="text-neutral transition-colors hover:text-text"
+                className="text-neutral transition-colors hover:text-foreground"
                 aria-label={content.closeTab.value}
               >
                 ×
diff --git a/packages/@intlayer/design-system/src/components/Toaster/Toast.tsx b/packages/@intlayer/design-system/src/components/Toaster/Toast.tsx
index 46c3413401..135deae85f 100644
--- a/packages/@intlayer/design-system/src/components/Toaster/Toast.tsx
+++ b/packages/@intlayer/design-system/src/components/Toaster/Toast.tsx
@@ -45,11 +45,11 @@ export const toastVariants = cva(
       /** Toast visual variants for different message types */
       variant: {
         /** Error state with red styling for failures and warnings */
-        error: 'bg-error/40 text-text',
+        error: 'bg-error/40 text-foreground',
         /** Success state with green styling for confirmations */
-        success: 'bg-success/30 text-text',
+        success: 'bg-success/30 text-foreground',
         /** Default neutral styling for general information */
-        default: 'bg-card/80 text-text',
+        default: 'bg-card/80 text-foreground',
       },
     },
     defaultVariants: {
@@ -164,7 +164,7 @@ export const ToastClose: FC<ComponentProps<typeof ToastPrimitives.Close>> = ({
 }) => (
   <ToastPrimitives.Close
     className={cn(
-      'absolute top-1 right-1 rounded-md p-1 text-text/50 opacity-0 transition-opacity hover:text-text/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.error]:text-red-300 group-[.error]:focus:ring-red-400 group-[.error]:focus:ring-offset-red-600 group-[.error]:hover:text-red-50',
+      'absolute top-1 right-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground/80 focus:opacity-100 focus:outline-hidden focus:ring-1 group-hover:opacity-100 group-[.error]:text-red-300 group-[.error]:focus:ring-red-400 group-[.error]:focus:ring-offset-red-600 group-[.error]:hover:text-red-50',
       className
     )}
     toast-close=""
diff --git a/packages/@intlayer/design-system/styles/fonts.css b/packages/@intlayer/design-system/styles/fonts.css
new file mode 100644
index 0000000000..50f51af7de
--- /dev/null
+++ b/packages/@intlayer/design-system/styles/fonts.css
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/Geist-VariableFont_wght.ttf') format('truetype');
+}
diff --git a/packages/@intlayer/design-system/styles/globals.css b/packages/@intlayer/design-system/styles/globals.css
new file mode 100644
index 0000000000..5d44f00f0d
--- /dev/null
+++ b/packages/@intlayer/design-system/styles/globals.css
@@ -0,0 +1,64 @@
+@import 'tailwindcss';
+@plugin "@tailwindcss/aspect-ratio";
+@source "../src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
+
+@import 'fonts.css';
+@import 'themes.css';
+
+@theme {
+  --font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-hover: var(--card-hover);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-hypertext: var(--hypertext);
+  --color-hypertext-hover: var(--hypertext-hover);
+  --color-hypertext-active: var(--hypertext-active);
+
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-error: var(--error);
+
+  --color-neutral: var(--neutral);
+  --color-white: var(--white);
+  --color-black: var(--black);
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+}
+
+html {
+  font-family: var(--font-sans);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+}
+
+* {
+  border-color: var(--border);
+}
diff --git a/packages/@intlayer/design-system/styles/themes.css b/packages/@intlayer/design-system/styles/themes.css
new file mode 100644
index 0000000000..4a11c3b263
--- /dev/null
+++ b/packages/@intlayer/design-system/styles/themes.css
@@ -0,0 +1,91 @@
+@custom-variant light (:where([data-theme="light"], [data-theme="light"] *) &);
+@custom-variant dark (:where([data-theme="dark"], [data-theme="dark"] *) &);
+
+:root,
+[data-theme='light'] {
+  color-scheme: light;
+
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+
+  --card: oklch(1 0 0);
+  --card-hover: oklch(0.97 0 0);
+
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+
+  --primary: oklch(94.3% 0.051 326);
+  --primary-foreground: oklch(0% 0 0);
+
+  --secondary: oklch(0.92 0.18 95);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+
+  --hypertext: oklch(0.205 0 0);
+  --hypertext-hover: oklch(0.65 0.15 330);
+  --hypertext-active: oklch(0.205 0 0);
+
+  --success: oklch(0.72 0.19 155);
+  --warning: oklch(0.75 0.15 75);
+  --error: oklch(0.55 0.2 25);
+
+  --neutral: oklch(0.58 0 0);
+
+  --white: oklch(1 0 0);
+  --black: oklch(0 0 0);
+
+  --radius: 0.625rem;
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+
+  --card: oklch(0.205 0 0);
+  --card-hover: oklch(0.3 0 0);
+
+  --muted: oklch(0.205 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+
+  --primary: oklch(94.3% 0.051 326);
+  --primary-foreground: oklch(0% 0 0);
+
+  --secondary: oklch(0.92 0.18 95);
+  --secondary-foreground: oklch(0.205 0 0);
+
+  --accent: oklch(0.27 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+
+  --border: oklch(0.3 0 0);
+  --input: oklch(0.3 0 0);
+  --ring: oklch(0.556 0 0);
+
+  --hypertext: oklch(0.985 0 0);
+  --hypertext-hover: oklch(0.65 0.15 330);
+  --hypertext-active: oklch(0.985 0 0);
+
+  --success: oklch(0.72 0.19 155);
+  --warning: oklch(0.75 0.15 75);
+  --error: oklch(0.55 0.2 25);
+
+  --neutral: oklch(0.38 0 0);
+
+  --white: oklch(1 0 0);
+  --black: oklch(0 0 0);
+
+  --radius: 0.625rem;
+}
diff --git a/packages/@intlayer/design-system/tailwind.css b/packages/@intlayer/design-system/tailwind.css
deleted file mode 100644
index 7229ebca22..0000000000
--- a/packages/@intlayer/design-system/tailwind.css
+++ /dev/null
@@ -1,269 +0,0 @@
-@import "tailwindcss";
-
-@font-face {
-  font-family: "Geist";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src:
-    url("/Geist-VariableFont_wght.woff2") format("woff2"),
-    url("/Geist-VariableFont_wght.ttf") format("truetype");
-}
-
-@theme {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(255, 255, 255);
-  --color-background-opposite: rgba(18, 18, 18);
-
-  --color-text: rgba(18, 18, 18);
-  --color-text-opposite: rgba(255, 255, 255);
-  --color-text-dark: rgba(255, 255, 255);
-  --color-text-light: rgba(18, 18, 18);
-
-  --color-card: rgba(231, 231, 231);
-  --color-card-hover: rgba(231, 231, 231);
-
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: var(--color-text);
-  --color-primary-50: rgba(249, 253, 230);
-  --color-primary-100: rgba(238, 248, 186);
-  --color-primary-200: rgba(226, 243, 143);
-  --color-primary-300: rgba(215, 239, 105);
-  --color-primary-400: var(--color-text);
-  --color-primary-500: rgba(182, 211, 57);
-  --color-primary-600: rgba(153, 177, 48);
-  --color-primary-700: rgba(116, 134, 37);
-  --color-primary-800: rgba(92, 106, 29);
-  --color-primary-900: rgba(67, 77, 21);
-  --color-primary-950: rgba(40, 46, 12);
-
-  --color-secondary: rgba(255, 230, 109);
-  --color-secondary-50: rgba(254, 251, 232);
-  --color-secondary-100: rgba(255, 246, 194);
-  --color-secondary-200: rgba(255, 230, 109);
-  --color-secondary-300: rgba(255, 216, 69);
-  --color-secondary-400: rgba(252, 193, 19);
-  --color-secondary-500: rgba(236, 168, 6);
-  --color-secondary-600: rgba(204, 129, 2);
-  --color-secondary-700: rgba(162, 90, 6);
-  --color-secondary-800: rgba(134, 71, 13);
-  --color-secondary-900: rgba(114, 58, 17);
-  --color-secondary-950: rgba(67, 29, 5);
-
-  --color-neutral: rgba(93, 93, 93);
-  --color-neutral-50: rgba(249, 249, 249);
-  --color-neutral-100: rgba(231, 231, 231);
-  --color-neutral-200: rgba(209, 209, 209);
-  --color-neutral-300: rgba(176, 176, 176);
-  --color-neutral-400: rgba(136, 136, 136);
-  --color-neutral-500: rgba(109, 109, 109);
-  --color-neutral-600: rgba(93, 93, 93);
-  --color-neutral-700: rgba(79, 79, 79);
-  --color-neutral-800: rgba(69, 69, 69);
-  --color-neutral-900: rgba(61, 61, 61);
-  --color-neutral-950: rgba(48, 48, 48);
-
-  --color-success: rgba(0, 204, 102, 1);
-  --color-success-50: rgba(235, 251, 243, 1);
-  --color-success-100: rgba(186, 242, 214, 1);
-  --color-success-200: rgba(121, 232, 180, 1);
-  --color-success-300: rgba(54, 219, 145, 1);
-  --color-success-400: rgba(26, 211, 123, 1);
-  --color-success-500: rgba(0, 184, 92, 1);
-  --color-success-600: rgba(0, 153, 77, 1);
-  --color-success-700: rgba(0, 122, 61, 1);
-  --color-success-800: rgba(0, 92, 46, 1);
-  --color-success-900: rgba(0, 61, 31, 1);
-
-  --color-warning: rgba(214, 153, 66);
-  --color-warning-50: rgba(254, 251, 232);
-  --color-warning-100: rgba(255, 246, 194);
-  --color-warning-200: rgba(255, 230, 109);
-  --color-warning-300: rgba(255, 216, 69);
-  --color-warning-400: rgba(252, 193, 19);
-  --color-warning-500: rgba(236, 168, 6);
-  --color-warning-600: rgba(204, 129, 2);
-  --color-warning-700: rgba(162, 90, 6);
-  --color-warning-800: rgba(134, 71, 13);
-  --color-warning-900: rgba(114, 58, 17);
-
-  --color-error: rgba(181, 24, 13);
-  --color-error-50: rgba(255, 245, 237);
-  --color-error-100: rgba(255, 232, 213);
-  --color-error-200: rgba(254, 206, 170);
-  --color-error-300: rgba(253, 171, 116);
-  --color-error-400: rgba(251, 125, 60);
-  --color-error-500: rgba(249, 90, 22);
-  --color-error-600: rgba(234, 63, 12);
-  --color-error-700: rgba(194, 45, 12);
-  --color-error-800: rgba(154, 37, 18);
-  --color-error-900: rgba(124, 33, 18);
-
-  --color-white: rgba(255, 255, 255);
-
-  --color-black: rgba(0, 0, 0);
-
-  /* Shadcn standard theme variables mapped to the design system */
-  --color-foreground: var(--foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-}
-
-@custom-variant dark (:where([data-theme="dark"], [data-theme="dark"] *) &);
-@custom-variant light (:where([data-theme="light"], [data-theme="light"] *) &);
-
-:root,
-[data-theme="light"] {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(255, 255, 255);
-  --color-background-opposite: rgba(18, 18, 18);
-
-  --color-text: rgba(18, 18, 18);
-  --color-text-opposite: rgba(255, 255, 255);
-  --color-text-dark: rgba(255, 255, 255);
-  --color-text-light: rgba(18, 18, 18);
-
-  --color-card: rgba(231, 231, 231);
-  --color-card-hover: rgba(231, 231, 231);
-
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: var(--color-text);
-  --color-secondary: rgba(255, 230, 109);
-  --color-neutral: rgba(93, 93, 93);
-
-  --color-success: rgba(0, 204, 102);
-  --color-warning: rgba(214, 153, 66);
-  --color-error: rgba(181, 24, 13);
-
-  --color-white: rgba(255, 255, 255);
-  --color-black: rgba(0, 0, 0);
-
-  /* Shadcn mappings (Light) */
-  --background: var(--color-background);
-  --foreground: var(--color-text);
-  --card: var(--color-card);
-  --card-foreground: var(--color-text);
-  --popover: var(--color-card);
-  --popover-foreground: var(--color-text);
-  --primary: var(--color-text);
-  --primary-foreground: var(--color-background);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-text-light);
-  --muted: var(--color-neutral-100);
-  --muted-foreground: var(--color-neutral-600);
-  --accent: var(--color-card);
-  --accent-foreground: var(--color-text);
-  --border: var(--color-neutral-200);
-  --input: var(--color-neutral-200);
-  --ring: var(--color-primary);
-  --radius: 0.5rem;
-
-  /* Monaco theme variables */
-  --monaco-background: var(--color-background);
-  --monaco-foreground: var(--color-text);
-  --monaco-border: var(--color-neutral-200);
-}
-
-[data-theme="dark"] {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(23, 23, 23);
-  --color-background-opposite: rgba(255, 255, 255);
-
-  --color-text: rgba(255, 245, 237);
-  --color-text-opposite: rgba(18, 18, 18);
-
-  --color-card: rgba(39, 39, 39);
-  --color-card-hover: rgba(79, 79, 79);
-
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: var(--color-text);
-  --color-secondary: rgba(255, 230, 109);
-  --color-neutral: rgba(93, 93, 93);
-
-  --color-success: rgba(0, 204, 102);
-  --color-warning: rgba(214, 153, 66);
-  --color-error: rgba(181, 24, 13);
-
-  --color-white: rgba(255, 255, 255);
-  --color-black: rgba(0, 0, 0);
-
-  /* Shadcn mappings (Dark) */
-  --background: var(--color-background);
-  --foreground: var(--color-text);
-  --card: var(--color-card);
-  --card-foreground: var(--color-text);
-  --popover: var(--color-card);
-  --popover-foreground: var(--color-text);
-  --primary: var(--color-text);
-  --primary-foreground: var(--color-background);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-text-light);
-  --muted: rgba(79, 79, 79, 1);
-  --muted-foreground: rgba(176, 176, 176, 1);
-  --accent: var(--color-card);
-  --accent-foreground: var(--color-text);
-  --border: rgba(79, 79, 79, 1);
-  --input: rgba(79, 79, 79, 1);
-  --ring: var(--color-primary);
-
-  /* Monaco theme variables */
-  --monaco-background: var(--color-background);
-  --monaco-foreground: var(--color-text);
-  --monaco-border: rgba(79, 79, 79, 1);
-}
-
-@plugin "@tailwindcss/aspect-ratio";
-
-@source "./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
-
-/**
- * Dual-theme Shiki output.
- *
- * Code blocks are highlighted once with both `github-light` and `github-dark`,
- * and every token carries its two colours as the `--shiki-light` /
- * `--shiki-dark` custom properties instead of a resolved `color`. One markup
- * therefore serves both themes, which is what allows the highlighting to be
- * done ahead of time — at build, on the server — rather than re-run in the
- * browser whenever the resolved theme changes.
- *
- * These rules live here, rather than in each app's `shiki.css`, because they
- * are what makes the code block components render at all: without them every
- * token resolves to an undefined variable.
- */
-.shiki,
-.shiki span {
-  color: var(--shiki-light);
-}
-
-[data-theme="dark"] .shiki,
-[data-theme="dark"] .shiki span {
-  color: var(--shiki-dark);
-}

From 93e9ae8e96999813f199791881e2e63656597e49 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Sun, 16 Aug 2026 23:24:02 +0200
Subject: [PATCH 03/32] fix(website): link variants and style adjustments

---
 .../src/components/Link/Link.tsx              | 140 +++++++++++-------
 1 file changed, 86 insertions(+), 54 deletions(-)

diff --git a/packages/@intlayer/design-system/src/components/Link/Link.tsx b/packages/@intlayer/design-system/src/components/Link/Link.tsx
index f4a5fa7ba4..ec56fa81ef 100644
--- a/packages/@intlayer/design-system/src/components/Link/Link.tsx
+++ b/packages/@intlayer/design-system/src/components/Link/Link.tsx
@@ -53,18 +53,18 @@ export const linkVariants = cva(
     variants: {
       variant: {
         default:
-          'h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6',
+          'h-auto justify-start border-inherit bg-transparent px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-transparent hover:text-current/80 hover:underline hover:underline-offset-6',
         'invisible-link':
-          'h-auto justify-start border-inherit bg-current/0 px-1',
+          'h-auto justify-start border-inherit bg-transparent px-1',
 
         button:
-          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current px-6 text-center font-medium text-foreground text-sm ring-0 *:text-foreground-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
+          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full px-6 text-center font-medium text-sm ring-0 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
 
         'button-outlined':
-          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current px-6 text-center font-medium text-foreground text-sm ring-0 *:text-foreground hover:bg-current/20 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
+          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] px-6 text-center font-medium text-sm ring-0 hover:bg-current/10 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
 
         hoverable:
-          'rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/10 aria-[current]:bg-current/5',
+          'rounded-lg border-none bg-transparent transition hover:bg-current/10 aria-[current]:bg-current/5',
       },
       roundedSize: {
         none: 'rounded-none',
@@ -78,6 +78,7 @@ export const linkVariants = cva(
           'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',
         full: 'rounded-full',
       },
+      // Pour "default" / "invisible-link" / "hoverable" : juste la couleur du texte
       color: {
         primary: 'text-primary',
         secondary: 'text-secondary',
@@ -85,7 +86,7 @@ export const linkVariants = cva(
         light: 'text-white',
         dark: 'text-neutral-800',
         text: 'text-foreground',
-        'text-inverse': 'text-foreground-opposite',
+        'text-inverse': 'text-foreground-opposite', // seulement utilisé hors button/button-outlined
         error: 'text-error',
         success: 'text-success',
         custom: '',
@@ -103,94 +104,125 @@ export const linkVariants = cva(
         false: 'no-underline',
       },
     },
-    // Compound variants handle height and padding
     compoundVariants: [
-      // ---------------------------------------------------------
-      // FIX START: Correctly Handle Contrast for TEXT_INVERSE
-      // ---------------------------------------------------------
+      // ----------------------------------------------------------------
+      // BUTTON PLEIN : paires fond/texte EXPLICITES, tirées du thème réel
+      // ----------------------------------------------------------------
       {
-        // Filled Button + Inverse Color (e.g., White Button):
-        // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).
-        // We ONLY override children to be 'text-foreground' (Dark) so they show up on white.
         variant: 'button',
-        color: 'text-inverse',
-        class: '*:text-foreground',
+        color: 'primary',
+        class: 'bg-primary text-primary-foreground ring-primary/20',
       },
       {
-        // Outlined Button + Inverse Color (e.g., White Border):
-        // Parent is 'text-opposite' (Border is white).
-        // Children must also be 'text-opposite' (White text) to show on dark background.
-        variant: 'button-outlined',
-        color: 'text-inverse',
-        class: 'text-foreground-opposite *:text-foreground-opposite',
+        variant: 'button',
+        color: 'secondary',
+        class: 'bg-secondary text-secondary-foreground ring-secondary/20',
       },
-
-      // Min height and padding for button variants
       {
-        variant: ['button', 'button-outlined'],
-        size: 'sm',
-        class: 'min-h-7 px-3 text-xs max-md:py-1',
+        variant: 'button',
+        color: 'neutral',
+        class: 'bg-neutral text-white ring-neutral/20',
       },
       {
-        variant: ['button', 'button-outlined'],
-        size: 'md',
-        class: 'min-h-8 px-6 text-sm max-md:py-2',
+        variant: 'button',
+        color: 'light',
+        class: 'bg-white text-black ring-white/20',
       },
       {
-        variant: ['button', 'button-outlined'],
-        size: 'lg',
-        class: 'min-h-10 px-8 text-lg max-md:py-3',
+        variant: 'button',
+        color: 'dark',
+        class: 'bg-neutral-800 text-white ring-neutral-800/20',
       },
       {
-        variant: ['button', 'button-outlined'],
-        size: 'xl',
-        class: 'min-h-11 px-10 text-xl max-md:py-4',
+        variant: 'button',
+        color: 'text',
+        class: 'bg-foreground text-background ring-foreground/20',
       },
-      // Ring color variants
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button',
+        color: 'text-inverse',
+        class: 'bg-background text-foreground ring-foreground/20',
+      },
+      {
+        variant: 'button',
+        color: 'error',
+        class: 'bg-error text-white ring-error/20',
+      },
+      {
+        variant: 'button',
+        color: 'success',
+        class: 'bg-success text-white ring-success/20',
+      },
+
+      // ----------------------------------------------------------------
+      // BUTTON OUTLINED : bordure + texte de la couleur, fond transparent
+      // ----------------------------------------------------------------
+      {
+        variant: 'button-outlined',
         color: 'primary',
-        class: 'ring-primary/20',
+        class: 'border-primary text-primary hover:bg-primary/10',
       },
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button-outlined',
         color: 'secondary',
-        class: 'ring-secondary/20',
+        class: 'border-secondary text-secondary hover:bg-secondary/10',
       },
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button-outlined',
         color: 'neutral',
-        class: 'ring-neutral/20',
+        class: 'border-neutral text-neutral hover:bg-neutral/10',
       },
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button-outlined',
         color: 'light',
-        class: 'ring-white/20',
+        class: 'border-white text-white hover:bg-white/10',
       },
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button-outlined',
         color: 'dark',
-        class: 'ring-neutral-800/20',
+        class: 'border-neutral-800 text-neutral-800 hover:bg-neutral-800/10',
       },
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button-outlined',
         color: 'text',
-        class: 'ring-text/20',
+        class: 'border-foreground text-foreground hover:bg-foreground/10',
       },
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button-outlined',
         color: 'text-inverse',
-        class: 'ring-text-opposite/20',
+        class: 'border-background text-background hover:bg-background/10',
       },
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button-outlined',
         color: 'error',
-        class: 'ring-error/20',
+        class: 'border-error text-error hover:bg-error/10',
       },
       {
-        variant: ['button', 'button-outlined'],
+        variant: 'button-outlined',
         color: 'success',
-        class: 'ring-success/20',
+        class: 'border-success text-success hover:bg-success/10',
+      },
+
+      // Min height et padding selon size (inchangé)
+      {
+        variant: ['button', 'button-outlined'],
+        size: 'sm',
+        class: 'min-h-7 px-3 text-xs max-md:py-1',
+      },
+      {
+        variant: ['button', 'button-outlined'],
+        size: 'md',
+        class: 'min-h-8 px-6 text-sm max-md:py-2',
+      },
+      {
+        variant: ['button', 'button-outlined'],
+        size: 'lg',
+        class: 'min-h-10 px-8 text-lg max-md:py-3',
+      },
+      {
+        variant: ['button', 'button-outlined'],
+        size: 'xl',
+        class: 'min-h-11 px-10 text-xl max-md:py-4',
       },
     ],
 

From 6d131496a7ea0e98c6b92259209504c01bf5a528 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Sun, 16 Aug 2026 23:24:21 +0200
Subject: [PATCH 04/32] style(website): navbar styling and theme fixes

---
 .../design-system/src/components/Navbar/DesktopNavbar.tsx       | 2 +-
 packages/@intlayer/design-system/styles/themes.css              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx b/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
index f816401466..bfd5444a88 100644
--- a/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
+++ b/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
@@ -94,7 +94,7 @@ export const DesktopNavbar = <T extends TabSelectorItemProps>({
   rightItems,
   selectedChoice,
 }: DesktopNavbarProps<T>) => (
-  <nav className="sticky top-0 z-50 flex w-full items-center bg-card/95 px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur">
+  <nav className="sticky top-0 z-50 flex w-full items-center border-b px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur-2xl">
     {logo}
 
     <TabSelector
diff --git a/packages/@intlayer/design-system/styles/themes.css b/packages/@intlayer/design-system/styles/themes.css
index 4a11c3b263..bba91b898e 100644
--- a/packages/@intlayer/design-system/styles/themes.css
+++ b/packages/@intlayer/design-system/styles/themes.css
@@ -17,7 +17,7 @@
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
 
-  --primary: oklch(94.3% 0.051 326);
+  --primary: oklch(94.3% 0.3 326);
   --primary-foreground: oklch(0% 0 0);
 
   --secondary: oklch(0.92 0.18 95);

From 51a981a3b27130637243288c1e75213cd0d06fbe Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Sun, 16 Aug 2026 23:48:00 +0200
Subject: [PATCH 05/32] style(website): tweak layout and component styles

---
 .../src/components/BlogPage/template.html     |  74 +++++------
 .../CMSLandingPage/ContentDeliverySection.tsx |   2 +-
 .../src/components/ChatBot/ChatBumble.tsx     |   2 +-
 .../src/components/I18nBenchmark/index.tsx    |   4 +-
 .../VisualEditorSection/index.tsx             |   2 +-
 .../LandingPage/HeroSection/index.tsx         |  23 ++--
 .../src/components/LandingPage/index.tsx      | 115 +++++++++---------
 .../LocaleSwitcher/LocaleSwitcher.tsx         |   2 +-
 .../Analyzer/Form/AnalyzerForm.tsx            |   6 +-
 .../Analyzer/Results/AnalyzerSiteResults.tsx  |   6 +-
 .../ScannerPage/RecursiveAuditResults.tsx     |   2 +-
 .../ScannerPage/UrlDiscoveryList.tsx          |   2 +-
 .../TMSLandingPage/FeaturesSection.tsx        |   2 +-
 .../TMSLandingPage/PainPointsSection.tsx      |   2 +-
 .../TranslationLandingPage/HeroSection.tsx    |   2 +-
 apps/website/src/routes/{-$locale}/index.tsx  |   2 +-
 16 files changed, 126 insertions(+), 122 deletions(-)

diff --git a/apps/website/src/components/BlogPage/template.html b/apps/website/src/components/BlogPage/template.html
index 2fca8e836c..c124a3e453 100644
--- a/apps/website/src/components/BlogPage/template.html
+++ b/apps/website/src/components/BlogPage/template.html
@@ -4659,7 +4659,7 @@
                           href="/en/for-developers/"
                           class="group/card flex items-start gap-3 p-3 rounded-lg hover:bg-mist-50 transition-colors group-data-[state=open]/panel:animate-in group-data-[state=open]/panel:fade-in-0 group-data-[state=open]/panel:slide-in-from-top-1 group-data-[state=open]/panel:duration-300 group-data-[state=open]/panel:fill-mode-both [animation-delay:40ms]"
                           ><div
-                            class="shrink-0 size-11 rounded-xl flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
+                            class="flex-shrink-0 size-11 rounded-lg flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
                           >
                             <svg
                               viewBox="0 0 24 24"
@@ -4696,7 +4696,7 @@
                           href="/en/for-translators/"
                           class="group/card flex items-start gap-3 p-3 rounded-lg hover:bg-mist-50 transition-colors group-data-[state=open]/panel:animate-in group-data-[state=open]/panel:fade-in-0 group-data-[state=open]/panel:slide-in-from-top-1 group-data-[state=open]/panel:duration-300 group-data-[state=open]/panel:fill-mode-both [animation-delay:70ms]"
                           ><div
-                            class="shrink-0 size-11 rounded-xl flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
+                            class="flex-shrink-0 size-11 rounded-lg flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
                           >
                             <svg
                               class="size-5"
@@ -4773,7 +4773,7 @@
                           href="/en/for-product-teams/"
                           class="group/card flex items-start gap-3 p-3 rounded-lg hover:bg-mist-50 transition-colors group-data-[state=open]/panel:animate-in group-data-[state=open]/panel:fade-in-0 group-data-[state=open]/panel:slide-in-from-top-1 group-data-[state=open]/panel:duration-300 group-data-[state=open]/panel:fill-mode-both [animation-delay:100ms]"
                           ><div
-                            class="shrink-0 size-11 rounded-xl flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
+                            class="flex-shrink-0 size-11 rounded-lg flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
                           >
                             <svg
                               viewBox="0 0 24 24"
@@ -4810,7 +4810,7 @@
                           href="/en/for-enterprises/"
                           class="group/card flex items-start gap-3 p-3 rounded-lg hover:bg-mist-50 transition-colors group-data-[state=open]/panel:animate-in group-data-[state=open]/panel:fade-in-0 group-data-[state=open]/panel:slide-in-from-top-1 group-data-[state=open]/panel:duration-300 group-data-[state=open]/panel:fill-mode-both [animation-delay:130ms]"
                           ><div
-                            class="shrink-0 size-11 rounded-xl flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
+                            class="flex-shrink-0 size-11 rounded-lg flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
                           >
                             <svg
                               class="size-5"
@@ -5296,7 +5296,7 @@
                           href="/en/integrations/mcp-server/"
                           class="group/card flex items-start gap-3 p-3 rounded-lg hover:bg-mist-50 transition-colors group-data-[state=open]/panel:animate-in group-data-[state=open]/panel:fade-in-0 group-data-[state=open]/panel:slide-in-from-top-1 group-data-[state=open]/panel:duration-300 group-data-[state=open]/panel:fill-mode-both [animation-delay:250ms]"
                           ><div
-                            class="shrink-0 size-11 rounded-xl flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
+                            class="flex-shrink-0 size-11 rounded-lg flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
                           >
                             <svg
                               class="size-5"
@@ -5342,7 +5342,7 @@
                           href="/en/integrations/ai-translation/"
                           class="group/card flex items-start gap-3 p-3 rounded-lg hover:bg-mist-50 transition-colors group-data-[state=open]/panel:animate-in group-data-[state=open]/panel:fade-in-0 group-data-[state=open]/panel:slide-in-from-top-1 group-data-[state=open]/panel:duration-300 group-data-[state=open]/panel:fill-mode-both [animation-delay:250ms]"
                           ><div
-                            class="shrink-0 size-11 rounded-xl flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
+                            class="flex-shrink-0 size-11 rounded-lg flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
                           >
                             <svg
                               class="size-5"
@@ -5606,7 +5606,7 @@
                           href="/en/what-is/"
                           class="group/card flex items-start gap-3 p-3 rounded-lg hover:bg-mist-50 transition-colors group-data-[state=open]/panel:animate-in group-data-[state=open]/panel:fade-in-0 group-data-[state=open]/panel:slide-in-from-top-1 group-data-[state=open]/panel:duration-300 group-data-[state=open]/panel:fill-mode-both [animation-delay:40ms]"
                           ><div
-                            class="shrink-0 size-11 rounded-xl flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
+                            class="flex-shrink-0 size-11 rounded-lg flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
                           >
                             <svg
                               viewBox="0 0 24 24"
@@ -5645,7 +5645,7 @@
                           data-status="active"
                           aria-current="page"
                           ><div
-                            class="shrink-0 size-11 rounded-xl flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
+                            class="flex-shrink-0 size-11 rounded-lg flex items-center justify-center text-mist-700 bg-gradient-to-br from-mist-50 to-white border border-mist-200 shadow-[0_1px_0_rgba(15,23,42,0.04)] transition-[transform,box-shadow,background,border-color,color] duration-300 ease-out group-hover/card:from-white group-hover/card:to-mist-50 group-hover/card:border-mist-300 group-hover/card:text-mist-950 group-hover/card:shadow-[0_6px_16px_-6px_rgba(15,23,42,0.18)] group-hover/card:scale-[1.04] group-hover/card:-rotate-1"
                           >
                             <svg
                               class="size-5"
@@ -7357,7 +7357,7 @@
           <div class="lg:flex lg:gap-16">
             <article class="min-w-0 flex-1 max-w-3xl">
               <div
-                class="lg:hidden mb-10 rounded-xl bg-mist-50/60 border border-mist-100 overflow-hidden"
+                class="lg:hidden mb-10 rounded-lg bg-mist-50/60 border border-mist-100 overflow-hidden"
               >
                 <details class="group">
                   <summary
@@ -7557,7 +7557,7 @@
                 </details>
               </div>
               <div
-                class="prose prose-lg max-w-none prose-headings:font-display prose-headings:font-medium prose-headings:tracking-[-0.02em] prose-headings:text-mist-950 prose-headings:scroll-mt-24 prose-p:text-mist-700 prose-p:leading-[1.8] prose-a:text-mist-950 prose-a:underline-offset-4 prose-a:decoration-mist-300 hover:prose-a:decoration-mist-500 prose-strong:text-mist-900 prose-strong:font-semibold prose-pre:p-0 prose-pre:bg-transparent prose-pre:rounded-none prose-pre:my-0 prose-pre:border-0 prose-pre:shadow-none prose-code:text-mist-900 prose-code:bg-mist-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-normal prose-code:before:content-none prose-code:after:content-none prose-blockquote:border-l-2 prose-blockquote:border-mist-200 prose-blockquote:pl-6 prose-blockquote:text-mist-600 prose-blockquote:not-italic prose-blockquote:font-normal prose-img:rounded-xl prose-img:shadow-sm prose-li:text-mist-700 prose-li:leading-[1.8] prose-hr:border-mist-100"
+                class="prose prose-lg max-w-none prose-headings:font-display prose-headings:font-medium prose-headings:tracking-[-0.02em] prose-headings:text-mist-950 prose-headings:scroll-mt-24 prose-p:text-mist-700 prose-p:leading-[1.8] prose-a:text-mist-950 prose-a:underline-offset-4 prose-a:decoration-mist-300 hover:prose-a:decoration-mist-500 prose-strong:text-mist-900 prose-strong:font-semibold prose-pre:p-0 prose-pre:bg-transparent prose-pre:rounded-none prose-pre:my-0 prose-pre:border-0 prose-pre:shadow-none prose-code:text-mist-900 prose-code:bg-mist-100 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:font-normal prose-code:before:content-none prose-code:after:content-none prose-blockquote:border-l-2 prose-blockquote:border-mist-200 prose-blockquote:pl-6 prose-blockquote:text-mist-600 prose-blockquote:not-italic prose-blockquote:font-normal prose-img:rounded-lg prose-img:shadow-sm prose-li:text-mist-700 prose-li:leading-[1.8] prose-hr:border-mist-100"
               >
                 <h2
                   id="astro-i18n-building-multi-language-static-and-dynamic-sites"
@@ -7619,7 +7619,7 @@ <h2 id="built-in-i18n-routing-astro-3x">
                 <h3 id="astroconfigmjs-setup">astro.config.mjs Setup</h3>
                 <p>The entry point is your Astro config file:</p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -7690,7 +7690,7 @@ <h3 id="file-structure">File Structure</h3>
                   under <code>src/pages/</code>:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -7751,7 +7751,7 @@ <h2 id="localized-internal-links-with-getrelativelocaleurl">
                   whether the default locale has a prefix or not.
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -7797,7 +7797,7 @@ <h2 id="localized-internal-links-with-getrelativelocaleurl">
                   full URLs for sitemaps or OG tags:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -7850,7 +7850,7 @@ <h2 id="fallback-content">Fallback Content</h2>
                   <code>fallback</code> configuration:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -7921,7 +7921,7 @@ <h2 id="custom-domain-mapping">Custom Domain Mapping</h2>
                   through <code>i18n.domains</code>:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -7978,7 +7978,7 @@ <h2 id="custom-domain-mapping">Custom Domain Mapping</h2>
                   mapping:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8030,7 +8030,7 @@ <h3 id="option-1-simple-json-files-no-library">
                 </h3>
                 <p>For small sites, a plain JSON approach works fine:</p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8068,7 +8068,7 @@ <h3 id="option-1-simple-json-files-no-library">
                   </div>
                 </div>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8108,7 +8108,7 @@ <h3 id="option-1-simple-json-files-no-library">
                   </div>
                 </div>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8158,7 +8158,7 @@ <h3 id="option-2-a-utility-function">
                 </h3>
                 <p>A small wrapper makes things more manageable:</p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8206,7 +8206,7 @@ <h3 id="option-2-a-utility-function">
                   </div>
                 </div>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8263,7 +8263,7 @@ <h3 id="astro-i18next">astro-i18next</h3>
                   Built on top of i18next, this is the most feature-rich option:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8297,7 +8297,7 @@ <h3 id="astro-i18next">astro-i18next</h3>
                   </div>
                 </div>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8337,7 +8337,7 @@ <h3 id="astro-i18next">astro-i18next</h3>
                   </div>
                 </div>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8386,7 +8386,7 @@ <h3 id="paraglide-js-inlang">Paraglide JS (Inlang)</h3>
                   and full TypeScript safety.
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8420,7 +8420,7 @@ <h3 id="paraglide-js-inlang">Paraglide JS (Inlang)</h3>
                   </div>
                 </div>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8465,7 +8465,7 @@ <h3 id="paraglide-js-inlang">Paraglide JS (Inlang)</h3>
                   </div>
                 </div>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8513,7 +8513,7 @@ <h3 id="intlayer">intlayer</h3>
                   separate locale files:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8591,7 +8591,7 @@ <h2 id="integrating-an-external-tms-with-astro-builds">
                   For CI/CD, this means your build pipeline might look like:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8680,7 +8680,7 @@ <h3 id="seo-metadata-per-locale">SEO Metadata Per Locale</h3>
                 </p>
                 <p>A shared layout component helps:</p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8757,7 +8757,7 @@ <h3 id="sitemap-generation">Sitemap Generation</h3>
                   i18n, but you need to configure it explicitly:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8823,7 +8823,7 @@ <h3 id="content-collections-with-localization">
                   directory:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8867,7 +8867,7 @@ <h3 id="content-collections-with-localization">
                 </div>
                 <p>Then filter by locale when querying:</p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8912,7 +8912,7 @@ <h3 id="content-collections-with-localization">
                   the English version:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -8984,7 +8984,7 @@ <h2 id="dynamic-locale-detection-in-ssr">
                   <code>Astro.request</code>:
                 </p>
                 <div
-                  class="not-prose my-6 rounded-xl overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
+                  class="not-prose my-6 rounded-lg overflow-hidden border border-mist-200 dark:border-mist-800 shadow-sm bg-mist-50 dark:bg-mist-950 relative group"
                 >
                   <div
                     class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
@@ -11407,7 +11407,7 @@ <h3 class="text-sm font-medium text-mist-950 mb-4">Connect</h3>
         class="fixed bottom-0 inset-x-0 z-50 flex justify-end pointer-events-none md:bottom-4 md:right-4 md:left-auto"
       >
         <div
-          class="pointer-events-auto flex w-full items-center justify-between gap-3 border-t border-mist-200 bg-white/90 px-4 py-3 shadow-sm backdrop-blur-sm md:w-auto md:max-w-100 md:rounded-xl md:border md:border-mist-200"
+          class="pointer-events-auto flex w-full items-center justify-between gap-3 border-t border-mist-200 bg-white/90 px-4 py-3 shadow-sm backdrop-blur-sm md:w-auto md:max-w-100 md:rounded-lg md:border md:border-mist-200"
         >
           <a
             href="https://dash.better-i18n.com"
diff --git a/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx b/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
index 5af7f499a0..1f2269655a 100644
--- a/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
+++ b/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
@@ -108,7 +108,7 @@ export const ContentDeliverySection: FC = () => {
                 </Tag>
               )}
 
-              <div className="mb-5 flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-foreground">
+              <div className="mb-5 flex size-12 items-center justify-center rounded-lg bg-neutral/10 text-foreground">
                 {iconMap[mode.icon.value] ?? <Zap className="size-6" />}
               </div>
 
diff --git a/apps/website/src/components/ChatBot/ChatBumble.tsx b/apps/website/src/components/ChatBot/ChatBumble.tsx
index 6130b104ec..0e31695b36 100644
--- a/apps/website/src/components/ChatBot/ChatBumble.tsx
+++ b/apps/website/src/components/ChatBot/ChatBumble.tsx
@@ -21,7 +21,7 @@ export const ChatBumble: FC<ChatBumbleProps> = ({
     <div
       className={cn(
         type === ChatBumbleType.QUESTION &&
-          'mr-4 ml-auto w-auto max-w-[90%] whitespace-pre-wrap rounded-xl rounded-tr-none bg-text/95 px-8 py-2 text-foreground-opposite',
+          'mr-4 ml-auto w-auto max-w-[90%] whitespace-pre-wrap rounded-lg rounded-tr-none bg-text/95 px-8 py-2 text-foreground-opposite',
         type === ChatBumbleType.ANSWER && 'w-full px-4'
       )}
       {...props}
diff --git a/apps/website/src/components/I18nBenchmark/index.tsx b/apps/website/src/components/I18nBenchmark/index.tsx
index 7f0b89f7db..2f5cb78a82 100644
--- a/apps/website/src/components/I18nBenchmark/index.tsx
+++ b/apps/website/src/components/I18nBenchmark/index.tsx
@@ -600,13 +600,13 @@ export const I18nBenchmark = ({
       </div>
 
       {/* Library selector — grid layout */}
-      <div className="max-h-60 overflow-y-auto">
+      <div className="max-h-60 overflow-y-auto rounded-lg border">
         <div className="flex flex-wrap">
           {allLibs.map((lib, index) => (
             <div
               key={lib.id}
               className={cn(
-                'min-w-max border-border border-r border-b border-dotted p-2',
+                'min-w-max border-border border-r border-b border-dashed p-2',
                 index < 2 ? 'flex-[2_2_16rem]' : 'flex-[1_1_10rem]'
               )}
             >
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/VisualEditorSection/index.tsx b/apps/website/src/components/LandingPage/FeaturesSection/VisualEditorSection/index.tsx
index 7c38cc2856..883092b7dc 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/VisualEditorSection/index.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/VisualEditorSection/index.tsx
@@ -46,7 +46,7 @@ export const VisualEditorSection: FC = () => {
     >
       <video
         ref={videoRef}
-        className="rounded-xl"
+        className="rounded-lg"
         aria-label="Visual Editor"
         loop
         muted
diff --git a/apps/website/src/components/LandingPage/HeroSection/index.tsx b/apps/website/src/components/LandingPage/HeroSection/index.tsx
index 7f927dcbef..da3496cc69 100644
--- a/apps/website/src/components/LandingPage/HeroSection/index.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/index.tsx
@@ -1,5 +1,5 @@
 import { Button } from '@intlayer/design-system/button';
-import { Container } from '@intlayer/design-system/container';
+import { Container, ContainerMotion } from '@intlayer/design-system/container';
 import { useCopyToClipboard } from '@intlayer/design-system/copy-to-clipboard';
 import { CodeBlock } from '@intlayer/design-system/ide';
 import {
@@ -37,8 +37,9 @@ export const HeroSection: FC = () => {
 
   return (
     <>
-      <section className="relative flex w-full flex-col px-4 md:px-8 lg:px-12">
+      <section className="relative flex w-full flex-col border-b px-4 md:px-8 lg:px-12">
         <div className="flex flex-1 flex-col items-center justify-center pt-16 pb-8">
+          {SHOW_WHATS_NEW && (
             <motion.div
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
@@ -47,12 +48,12 @@ export const HeroSection: FC = () => {
             >
               <Link to={Website_ReleasesV9_Path} label={whatsNewLabel.value}>
                 <Tag
-                  size="sm"
+                  size="md"
                   border="with"
                   className="flex items-center gap-2 rounded-full border font-medium text-foreground text-sm"
                 >
                   <Megaphone className="size-4" />
-                  <span className="flex items-center gap-1 font-medium text-sm sm:text-sm">
+                  <span className="no-underline! flex items-center gap-1 font-medium text-sm sm:text-sm">
                     {version} v{packageJSON.version}{' '}
                     <ArrowRight className="size-3" />
                   </span>
@@ -82,10 +83,12 @@ export const HeroSection: FC = () => {
             {description}
           </p>
           {/* Copyable code block */}
-          <Container
-            roundedSize="2xl"
-            className="hero-enter-lift m-auto mt-24 max-w-2xl flex-row items-center p-1 pl-6"
-            style={{ animationDelay: '0.7s' }}
+          <ContainerMotion
+            initial={{ opacity: 0, y: 0 }}
+            animate={{ opacity: 1, y: -30 }}
+            transition={{ delay: 0.7, duration: 0.6 }}
+            roundedSize="xl"
+            className="m-auto mt-24 w-full max-w-2xl flex-row items-center border p-1 pl-6"
           >
             <CodeBlock lang="bash">npx intlayer init</CodeBlock>
             <Button
@@ -96,7 +99,7 @@ export const HeroSection: FC = () => {
               Icon={isCopied ? Check : Copy}
               label={copyButton.value}
             />
-          </Container>
+          </ContainerMotion>
           {/* Action Buttons */}
           <div
             className="hero-enter mt-10 mb-6 flex flex-col justify-center gap-3 sm:flex-row sm:gap-4 lg:mb-10"
@@ -136,7 +139,7 @@ export const HeroSection: FC = () => {
         initial={{ opacity: 0, y: 30 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ delay: 1.0, duration: 0.6 }}
-        className="relative mt-8 w-full border-t"
+        className="relative w-full border-b"
       >
         <p className="hidden font-medium text-foreground text-sm tracking-wider sm:text-base">
           {availableFor}
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index 67aee6c8cf..209a9720c1 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -69,6 +69,64 @@ export const LandingPage: FC = () => {
         <section aria-label={content.heroSection.value}>
           <HeroSection />
         </section>
+
+        <section aria-label={content.whyChooseIntlayerSection.value}>
+          <Suspense fallback={<Loader />}>
+            <WhyToChoseIntlayerSection />
+          </Suspense>
+        </section>
+
+        <div className="relative flex w-full flex-col gap-24 overflow-hidden bg-neutral/5 py-16 dark:bg-neutral-900/10">
+          <section aria-label={content.benchmarkSection.value}>
+            <Suspense fallback={<Loader />}>
+              <I18nBenchmarkSection />
+            </Suspense>
+          </section>
+
+          <section aria-label={content.supportedLanguagesSection.value}>
+            <Suspense fallback={<Loader />}>
+              <LanguageSection />
+            </Suspense>
+          </section>
+
+          <section aria-label={content.codeAuditSection.value}>
+            <Suspense fallback={<Loader />}>
+              <AuditSection />
+            </Suspense>
+          </section>
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-x-0 top-0 h-4 bg-background [clip-path:polygon(0_0,100%_0,0_100%)]"
+          />
+          <div
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-x-0 bottom-0 h-4 bg-background [clip-path:polygon(100%_0,100%_100%,0_100%)]"
+          />
+        </div>
+
+        <section aria-label={content.productsSection.value}>
+          <Suspense fallback={<Loader />}>
+            <ProductsSection />
+          </Suspense>
+        </section>
+        <section aria-label={content.technologiesSection.value}>
+          <Suspense fallback={<Loader />}>
+            <AvailableTechnoSection />
+          </Suspense>
+        </section>
+        <section aria-label={content.liveDemoSection.value}>
+          <Suspense fallback={<Loader />}>
+            <DemoSection />
+          </Suspense>
+        </section>
+        <section aria-label={content.contributorsSection.value}>
+          <Suspense fallback={<Loader />}>
+            <ContributorSection />
+          </Suspense>
+        </section>
+        <section aria-label={content.faqSection.value}>
+          <CommonQuestionsSection />
+        </section>
       </main>
 
       <Suspense fallback={<Loader />}>
@@ -86,62 +144,5 @@ export const LandingPage: FC = () => {
   </Suspense>
 </section>
 
-<section aria-label={content.whyChooseIntlayerSection.value}>
-  <Suspense fallback={<Loader />}>
-    <WhyToChoseIntlayerSection />
-  </Suspense>
-</section>
-
-<div className="relative flex w-full flex-col gap-24 overflow-hidden bg-neutral/5 py-16 dark:bg-neutral-900/10">
-  <section aria-label={content.benchmarkSection.value}>
-    <Suspense fallback={<Loader />}>
-      <I18nBenchmarkSection />
-    </Suspense>
-  </section>
-
-  <section aria-label={content.supportedLanguagesSection.value}>
-    <Suspense fallback={<Loader />}>
-      <LanguageSection />
-    </Suspense>
-  </section>
-
-  <section aria-label={content.codeAuditSection.value}>
-    <Suspense fallback={<Loader />}>
-      <AuditSection />
-    </Suspense>
-  </section>
-  <div
-    aria-hidden="true"
-    className="pointer-events-none absolute inset-x-0 top-0 h-4 bg-background [clip-path:polygon(0_0,100%_0,0_100%)]"
-  />
-  <div
-    aria-hidden="true"
-    className="pointer-events-none absolute inset-x-0 bottom-0 h-4 bg-background [clip-path:polygon(100%_0,100%_100%,0_100%)]"
-  />
-</div>
-
-<section aria-label={content.productsSection.value}>
-  <Suspense fallback={<Loader />}>
-    <ProductsSection />
-  </Suspense>
-</section>
-<section aria-label={content.technologiesSection.value}>
-  <Suspense fallback={<Loader />}>
-    <AvailableTechnoSection />
-  </Suspense>
-</section>
-<section aria-label={content.liveDemoSection.value}>
-  <Suspense fallback={<Loader />}>
-    <DemoSection />
-  </Suspense>
-</section>
-<section aria-label={content.contributorsSection.value}>
-  <Suspense fallback={<Loader />}>
-    <ContributorSection />
-  </Suspense>
-</section>
-<section aria-label={content.faqSection.value}>
-  <CommonQuestionsSection />
-</section>
 
 */
diff --git a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
index bc16a9f07a..85419e1dd4 100644
--- a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
+++ b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
@@ -53,7 +53,7 @@ export const LocaleSwitcher: FC<LocaleSwitcherProps> = ({
   };
 
   return (
-    <div className="flex rounded-xl text-foreground transition-colors">
+    <div className="flex rounded-lg text-foreground transition-colors">
       <DropDown identifier={DROPDOWN_IDENTIFIER}>
         <DropDown.Trigger
           identifier={DROPDOWN_IDENTIFIER}
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Form/AnalyzerForm.tsx b/apps/website/src/components/ScannerPage/Analyzer/Form/AnalyzerForm.tsx
index 67cc9ecff4..1667416381 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Form/AnalyzerForm.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Form/AnalyzerForm.tsx
@@ -53,7 +53,7 @@ export const AnalyzerForm: FC<AnalyzerFormProps> = ({
         aria-label={input.label.value}
         type="url"
         placeholder={input.placeholder.value}
-        className="flex-1 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2"
+        className="flex-1 rounded-lg px-4 py-3 text-sm focus:outline-none focus:ring-2"
       />
       <div className="flex items-stretch gap-2">
         <FormButton
@@ -64,7 +64,7 @@ export const AnalyzerForm: FC<AnalyzerFormProps> = ({
           variant="fade"
           color="custom"
           isLoading={isSubmitting || loading}
-          className="w-full rounded-xl px-5 py-2 font-medium"
+          className="w-full rounded-lg px-5 py-2 font-medium"
         >
           {loading ? button.analyzing : button.analyze}
         </FormButton>
@@ -76,7 +76,7 @@ export const AnalyzerForm: FC<AnalyzerFormProps> = ({
             size="md"
             variant="outline"
             color="text"
-            className="rounded-xl px-5 py-2 font-medium"
+            className="rounded-lg px-5 py-2 font-medium"
           >
             {button.cancel}
           </FormButton>
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
index 5b28ac93fb..e3fcf215ea 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
@@ -17,7 +17,7 @@ import type { DomainData } from './types';
 //     </div>
 
 //     <div className="flex items-center gap-8">
-//       <div className="h-45 w-75 animate-pulse rounded-xl border-4 border-neutral bg-neutral/20" />
+//       <div className="h-45 w-75 animate-pulse rounded-lg border-4 border-neutral bg-neutral/20" />
 //       <div className="flex-1 space-y-3">
 //         <div className="h-7 w-3/4 animate-pulse rounded bg-neutral/20" />
 //         <div className="h-4 w-full animate-pulse rounded bg-neutral/20" />
@@ -43,7 +43,7 @@ const Skeleton: FC<SkeletonProps> = ({
   isLoading ? (
     <div
       className={cn(
-        'inline-block animate-pulse rounded-xl bg-neutral/20',
+        'inline-block animate-pulse rounded-lg bg-neutral/20',
         className
       )}
     >
@@ -91,7 +91,7 @@ export const AnalyzerSiteResults: FC<AnalyzerSiteResultsProps> = ({
 
       <div className="flex items-center gap-8">
         <Skeleton
-          className="h-45 w-75 max-w-[30vw] rounded-xl border-4"
+          className="h-45 w-75 max-w-[30vw] rounded-lg border-4"
           isLoading={isLoading && !domainData?.image}
           renderChildren={false}
         >
diff --git a/apps/website/src/components/ScannerPage/RecursiveAuditResults.tsx b/apps/website/src/components/ScannerPage/RecursiveAuditResults.tsx
index 113aedf929..4042f8ea05 100644
--- a/apps/website/src/components/ScannerPage/RecursiveAuditResults.tsx
+++ b/apps/website/src/components/ScannerPage/RecursiveAuditResults.tsx
@@ -218,7 +218,7 @@ export const RecursiveAuditResults: FC<RecursiveAuditResultsProps> = memo(
           </div>
         </div>
 
-        <div className="max-h-[32rem] overflow-auto rounded-xl border border-neutral/20 bg-card/50">
+        <div className="max-h-[32rem] overflow-auto rounded-lg border border-neutral/20 bg-card/50">
           <table className="w-full text-left text-sm">
             <thead className="sticky top-0 z-10 bg-card shadow-sm">
               <tr>
diff --git a/apps/website/src/components/ScannerPage/UrlDiscoveryList.tsx b/apps/website/src/components/ScannerPage/UrlDiscoveryList.tsx
index 628bb13ed4..28fd0472e8 100644
--- a/apps/website/src/components/ScannerPage/UrlDiscoveryList.tsx
+++ b/apps/website/src/components/ScannerPage/UrlDiscoveryList.tsx
@@ -107,7 +107,7 @@ export const UrlDiscoveryList: FC<UrlDiscoveryListProps> = ({
         placeholder={searchPlaceholder.value}
       />
 
-      <div className="max-h-80 overflow-auto rounded-xl border border-neutral/20 bg-card/50">
+      <div className="max-h-80 overflow-auto rounded-lg border border-neutral/20 bg-card/50">
         <table className="w-full text-left text-sm">
           <thead className="sticky top-0 z-10 bg-card shadow-sm">
             <tr>
diff --git a/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx b/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
index 3ad33fda30..e7e59f1e3b 100644
--- a/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
@@ -91,7 +91,7 @@ export const FeaturesSection: FC = () => {
               border={true}
               className="group flex flex-col gap-4"
             >
-              <div className="flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
+              <div className="flex size-12 items-center justify-center rounded-lg bg-neutral/10 text-foreground transition-colors group-hover:bg-primary/10 group-hover:text-primary">
                 {iconMap[feature.icon.value] ?? <Sparkles className="size-6" />}
               </div>
 
diff --git a/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx b/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
index 6987136182..b1a6dd1675 100644
--- a/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
@@ -64,7 +64,7 @@ export const PainPointsSection: FC = () => {
               border={true}
               className="relative"
             >
-              <div className="mb-5 flex size-12 items-center justify-center rounded-xl bg-neutral/10 text-foreground">
+              <div className="mb-5 flex size-12 items-center justify-center rounded-lg bg-neutral/10 text-foreground">
                 {iconMap[point.icon.value]}
               </div>
               <h3 className="mb-3 font-semibold text-foreground text-xl">
diff --git a/apps/website/src/components/TranslationLandingPage/HeroSection.tsx b/apps/website/src/components/TranslationLandingPage/HeroSection.tsx
index a33e3b3b03..6e40f13dca 100644
--- a/apps/website/src/components/TranslationLandingPage/HeroSection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/HeroSection.tsx
@@ -174,7 +174,7 @@ export const HeroSection: FC = () => {
           >
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-2">
-                <div className="rounded-xl bg-text/10 p-2">
+                <div className="rounded-lg bg-text/10 p-2">
                   <Globe className="size-5 text-foreground" />
                 </div>
                 <div className="font-medium text-foreground text-sm">
diff --git a/apps/website/src/routes/{-$locale}/index.tsx b/apps/website/src/routes/{-$locale}/index.tsx
index 6406cf65fc..193a1f7f60 100644
--- a/apps/website/src/routes/{-$locale}/index.tsx
+++ b/apps/website/src/routes/{-$locale}/index.tsx
@@ -100,7 +100,7 @@ export const Route = createFileRoute('/{-$locale}/')({
 
 function LandingPage() {
   return (
-    <PageLayout mainClassName="max-w-[1300px] mx-auto border-x">
+    <PageLayout mainClassName="max-w-[1300px] mx-auto border-x ">
       <LandingPageContent />
     </PageLayout>
   );

From 692720714d0cfdba5e6a947f14b2f0b945668235 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Mon, 17 Aug 2026 23:37:39 +0200
Subject: [PATCH 06/32] style(website): add light rays effect and improve hero
 section

---
 .../LandingPage/HeroSection/index.tsx         | 112 +++--
 apps/website/src/components/LightRays.tsx     | 469 ++++++++++++++++++
 2 files changed, 548 insertions(+), 33 deletions(-)
 create mode 100644 apps/website/src/components/LightRays.tsx

diff --git a/apps/website/src/components/LandingPage/HeroSection/index.tsx b/apps/website/src/components/LandingPage/HeroSection/index.tsx
index da3496cc69..62cdab4a38 100644
--- a/apps/website/src/components/LandingPage/HeroSection/index.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/index.tsx
@@ -1,18 +1,26 @@
 import { Button } from '@intlayer/design-system/button';
-import { Container, ContainerMotion } from '@intlayer/design-system/container';
 import { useCopyToClipboard } from '@intlayer/design-system/copy-to-clipboard';
 import { CodeBlock } from '@intlayer/design-system/ide';
 import {
   External_Github,
+  Website_Doc_Environment_ViteAndReact_Path,
   Website_Doc_Path,
   Website_ReleasesV9_Path,
 } from '@intlayer/design-system/routes';
 import { Tag } from '@intlayer/design-system/tag';
 import { motion } from 'framer-motion';
-import { ArrowRight, Check, Copy, Megaphone } from 'lucide-react';
+import {
+  ArrowRight,
+  Check,
+  ChevronRight,
+  Copy,
+  ExternalLink,
+  Megaphone,
+} from 'lucide-react';
 import { useTheme } from 'next-themes';
 import type { FC } from 'react';
 import { useIntlayer } from 'react-intlayer';
+import LightRays from '~/components/LightRays';
 import { Link } from '~/components/Link/Link';
 import packageJSON from '../../../../package_mock.json' with { type: 'json' };
 import { TechLogos } from './TechLogos';
@@ -21,7 +29,7 @@ const SHOW_WHATS_NEW = true;
 
 export const HeroSection: FC = () => {
   const {
-    whatsNew,
+    //    whatsNew,
     whatsNewLabel,
     version,
     title,
@@ -33,12 +41,31 @@ export const HeroSection: FC = () => {
     copyButton,
   } = useIntlayer('hero-section');
 
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === 'dark';
   const { isCopied, copy } = useCopyToClipboard('npx intlayer init');
 
   return (
-    <>
-      <section className="relative flex w-full flex-col border-b px-4 md:px-8 lg:px-12">
-        <div className="flex flex-1 flex-col items-center justify-center pt-16 pb-8">
+    <section className="relative flex min-h-[calc(100vh-60px)] flex-col">
+      <section className="relative flex w-full flex-1 flex-col border-b px-4 md:px-8 lg:px-12">
+        <div className="pointer-events-none absolute inset-0 -z-1 hidden dark:block">
+          <LightRays
+            raysOrigin="top-center"
+            raysColor="#ffe1ff"
+            raysSpeed={0.8}
+            lightSpread={0.5}
+            rayLength={3}
+            followMouse={true}
+            mouseInfluence={0.1}
+            noiseAmount={0}
+            distortion={0}
+            className="custom-rays"
+            pulsating={false}
+            fadeDistance={1}
+            saturation={1}
+          />
+        </div>
+        <div className="flex flex-1 flex-col items-center justify-center py-16">
           {SHOW_WHATS_NEW && (
             <motion.div
               initial={{ opacity: 0, y: 30 }}
@@ -49,8 +76,7 @@ export const HeroSection: FC = () => {
               <Link to={Website_ReleasesV9_Path} label={whatsNewLabel.value}>
                 <Tag
                   size="md"
-                  border="with"
-                  className="flex items-center gap-2 rounded-full border font-medium text-foreground text-sm"
+                  className="flex items-center gap-2 rounded-full border bg-card/10 font-medium text-foreground text-sm backdrop-blur-xl"
                 >
                   <Megaphone className="size-4" />
                   <span className="no-underline! flex items-center gap-1 font-medium text-sm sm:text-sm">
@@ -63,7 +89,7 @@ export const HeroSection: FC = () => {
           )}
 
           {/* Title */}
-          <h1 className="mb-4 text-center font-bold text-4xl leading-tight sm:text-4xl md:text-5xl lg:mb-6 lg:text-6xl">
+          <h1 className="mb-3 text-center font-bold text-4xl leading-tight sm:text-4xl md:text-5xl lg:text-6xl">
             {title}
           </h1>
           {/* Subtitle */}
@@ -76,34 +102,48 @@ export const HeroSection: FC = () => {
             {subheading}
           </motion.h2>
           {/* Description */}
-          <p
-            className="hero-enter mx-auto max-w-2xl text-center font-medium text-neutral text-sm leading-relaxed sm:text-lg lg:mb-12"
-            style={{ animationDelay: '0.6s' }}
-          >
-            {description}
-          </p>
+
           {/* Copyable code block */}
-          <ContainerMotion
+          <motion.div
             initial={{ opacity: 0, y: 0 }}
             animate={{ opacity: 1, y: -30 }}
             transition={{ delay: 0.7, duration: 0.6 }}
-            roundedSize="xl"
-            className="m-auto mt-24 w-full max-w-2xl flex-row items-center border p-1 pl-6"
+            onClick={copy}
+            className="mt-8 flex w-full max-w-xl cursor-pointer flex-row items-center justify-center rounded-lg border bg-card p-1 py-2 pr-2 pl-4"
           >
-            <CodeBlock lang="bash">npx intlayer init</CodeBlock>
+            <ChevronRight className="size-8 text-muted-foreground" />
+            <CodeBlock
+              className="justify-center"
+              lang="bash"
+              isDarkMode={isDarkMode}
+            >
+              npx intlayer init
+            </CodeBlock>
             <Button
               variant="hoverable"
               color="neutral"
-              size="icon-xl"
+              size="icon-lg"
+              roundedSize="xl"
               onClick={copy}
               Icon={isCopied ? Check : Copy}
               label={copyButton.value}
             />
-          </ContainerMotion>
+          </motion.div>
+          <motion.p
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.6, duration: 0.6 }}
+            className="mx-auto max-w-xl text-center text-justify text-muted-foreground text-sm leading-relaxed sm:text-lg lg:mb-12"
+          >
+            {description}
+          </motion.p>
+
           {/* Action Buttons */}
-          <div
-            className="hero-enter mt-10 mb-6 flex flex-col justify-center gap-3 sm:flex-row sm:gap-4 lg:mb-10"
-            style={{ animationDelay: '0.8s' }}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8, duration: 0.6 }}
+            className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4"
           >
             <Link
               to={External_Github}
@@ -112,7 +152,7 @@ export const HeroSection: FC = () => {
               label={supportButton.value}
               isExternalLink={false}
               size="lg"
-              roundedSize="full"
+              roundedSize="sm"
             >
               <span className="block text-sm sm:text-lg">{supportButton}</span>
             </Link>
@@ -123,7 +163,7 @@ export const HeroSection: FC = () => {
               color="text"
               label={getStartedButton.value}
               size="xl"
-              roundedSize="full"
+              roundedSize="sm"
               className="flex flex-row items-center justify-center gap-2"
             >
               <span className="block text-sm sm:text-lg">
@@ -132,20 +172,26 @@ export const HeroSection: FC = () => {
 
               <ArrowRight width={20} height={20} />
             </Link>
-          </div>
+          </motion.div>
         </div>
       </section>
+      <Link to={Website_Doc_Environment_ViteAndReact_Path} label={availableFor}>
+        <div className="flex items-center justify-between gap-4 border-b p-3">
+          <p className="font-mono text-foreground text-sm uppercase tracking-wider sm:text-base">
+            {availableFor}
+          </p>
+          <ExternalLink className="size-5 text-muted-foreground" />
+        </div>
+      </Link>
+
       <motion.section
-        initial={{ opacity: 0, y: 30 }}
-        animate={{ opacity: 1, y: 0 }}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
         transition={{ delay: 1.0, duration: 0.6 }}
         className="relative w-full border-b"
       >
-        <p className="hidden font-medium text-foreground text-sm tracking-wider sm:text-base">
-          {availableFor}
-        </p>
         <TechLogos />
       </motion.section>
-    </>
+    </section>
   );
 };
diff --git a/apps/website/src/components/LightRays.tsx b/apps/website/src/components/LightRays.tsx
new file mode 100644
index 0000000000..2032aaf8a6
--- /dev/null
+++ b/apps/website/src/components/LightRays.tsx
@@ -0,0 +1,469 @@
+import { Mesh, Program, Renderer, Triangle } from 'ogl';
+import { useEffect, useRef, useState } from 'react';
+
+export type RaysOrigin =
+  | 'top-center'
+  | 'top-left'
+  | 'top-right'
+  | 'right'
+  | 'left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'bottom-left';
+
+interface LightRaysProps {
+  raysOrigin?: RaysOrigin;
+  raysColor?: string;
+  raysSpeed?: number;
+  lightSpread?: number;
+  rayLength?: number;
+  pulsating?: boolean;
+  fadeDistance?: number;
+  saturation?: number;
+  followMouse?: boolean;
+  mouseInfluence?: number;
+  noiseAmount?: number;
+  distortion?: number;
+  className?: string;
+}
+
+const DEFAULT_COLOR = '#ffffff';
+
+const hexToRgb = (hex: string): [number, number, number] => {
+  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return m
+    ? [
+        parseInt(m[1], 16) / 255,
+        parseInt(m[2], 16) / 255,
+        parseInt(m[3], 16) / 255,
+      ]
+    : [1, 1, 1];
+};
+
+const getAnchorAndDir = (
+  origin: RaysOrigin,
+  w: number,
+  h: number
+): { anchor: [number, number]; dir: [number, number] } => {
+  const outside = 0.2;
+  switch (origin) {
+    case 'top-left':
+      return { anchor: [0, -outside * h], dir: [0, 1] };
+    case 'top-right':
+      return { anchor: [w, -outside * h], dir: [0, 1] };
+    case 'left':
+      return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] };
+    case 'right':
+      return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] };
+    case 'bottom-left':
+      return { anchor: [0, (1 + outside) * h], dir: [0, -1] };
+    case 'bottom-center':
+      return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] };
+    case 'bottom-right':
+      return { anchor: [w, (1 + outside) * h], dir: [0, -1] };
+    default: // "top-center"
+      return { anchor: [0.5 * w, -outside * h], dir: [0, 1] };
+  }
+};
+
+type Vec2 = [number, number];
+type Vec3 = [number, number, number];
+
+interface Uniforms {
+  iTime: { value: number };
+  iResolution: { value: Vec2 };
+  rayPos: { value: Vec2 };
+  rayDir: { value: Vec2 };
+  raysColor: { value: Vec3 };
+  raysSpeed: { value: number };
+  lightSpread: { value: number };
+  rayLength: { value: number };
+  pulsating: { value: number };
+  fadeDistance: { value: number };
+  saturation: { value: number };
+  mousePos: { value: Vec2 };
+  mouseInfluence: { value: number };
+  noiseAmount: { value: number };
+  distortion: { value: number };
+}
+
+const LightRays: React.FC<LightRaysProps> = ({
+  raysOrigin = 'top-center',
+  raysColor = DEFAULT_COLOR,
+  raysSpeed = 1,
+  lightSpread = 1,
+  rayLength = 2,
+  pulsating = false,
+  fadeDistance = 1.0,
+  saturation = 1.0,
+  followMouse = true,
+  mouseInfluence = 0.1,
+  noiseAmount = 0.0,
+  distortion = 0.0,
+  className = '',
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const uniformsRef = useRef<Uniforms | null>(null);
+  const rendererRef = useRef<Renderer | null>(null);
+  const mouseRef = useRef({ x: 0.5, y: 0.5 });
+  const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });
+  const animationIdRef = useRef<number | null>(null);
+  const meshRef = useRef<Mesh | null>(null);
+  const cleanupFunctionRef = useRef<(() => void) | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.1 }
+    );
+
+    observerRef.current.observe(containerRef.current);
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isVisible || !containerRef.current) return;
+
+    if (cleanupFunctionRef.current) {
+      cleanupFunctionRef.current();
+      cleanupFunctionRef.current = null;
+    }
+
+    const initializeWebGL = async () => {
+      if (!containerRef.current) return;
+
+      await new Promise((resolve) => setTimeout(resolve, 10));
+
+      if (!containerRef.current) return;
+
+      const renderer = new Renderer({
+        dpr: Math.min(window.devicePixelRatio, 2),
+        alpha: true,
+      });
+      rendererRef.current = renderer;
+
+      const gl = renderer.gl;
+      gl.canvas.style.width = '100%';
+      gl.canvas.style.height = '100%';
+
+      while (containerRef.current.firstChild) {
+        containerRef.current.removeChild(containerRef.current.firstChild);
+      }
+      containerRef.current.appendChild(gl.canvas);
+
+      const vert = `
+attribute vec2 position;
+varying vec2 vUv;
+void main() {
+  vUv = position * 0.5 + 0.5;
+  gl_Position = vec4(position, 0.0, 1.0);
+}`;
+
+      const frag = `precision highp float;
+
+uniform float iTime;
+uniform vec2  iResolution;
+
+uniform vec2  rayPos;
+uniform vec2  rayDir;
+uniform vec3  raysColor;
+uniform float raysSpeed;
+uniform float lightSpread;
+uniform float rayLength;
+uniform float pulsating;
+uniform float fadeDistance;
+uniform float saturation;
+uniform vec2  mousePos;
+uniform float mouseInfluence;
+uniform float noiseAmount;
+uniform float distortion;
+
+varying vec2 vUv;
+
+float noise(vec2 st) {
+  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
+}
+
+float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,
+                  float seedA, float seedB, float speed) {
+  vec2 sourceToCoord = coord - raySource;
+  vec2 dirNorm = normalize(sourceToCoord);
+  float cosAngle = dot(dirNorm, rayRefDirection);
+
+  float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
+
+  float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));
+
+  float distance = length(sourceToCoord);
+  float maxDistance = iResolution.x * rayLength;
+  float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
+
+  float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);
+  float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;
+
+  float baseStrength = clamp(
+    (0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +
+    (0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),
+    0.0, 1.0
+  );
+
+  return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);
+
+  vec2 finalRayDir = rayDir;
+  if (mouseInfluence > 0.0) {
+    vec2 mouseScreenPos = mousePos * iResolution.xy;
+    vec2 mouseDirection = normalize(mouseScreenPos - rayPos);
+    finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));
+  }
+
+  vec4 rays1 = vec4(1.0) *
+               rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349,
+                           1.5 * raysSpeed);
+  vec4 rays2 = vec4(1.0) *
+               rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234,
+                           1.1 * raysSpeed);
+
+  fragColor = rays1 * 0.5 + rays2 * 0.4;
+
+  if (noiseAmount > 0.0) {
+    float n = noise(coord * 0.01 + iTime * 0.1);
+    fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);
+  }
+
+  float brightness = 1.0 - (coord.y / iResolution.y);
+  fragColor.x *= 0.1 + brightness * 0.8;
+  fragColor.y *= 0.3 + brightness * 0.6;
+  fragColor.z *= 0.5 + brightness * 0.5;
+
+  if (saturation != 1.0) {
+    float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));
+    fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);
+  }
+
+  fragColor.rgb *= raysColor;
+}
+
+void main() {
+  vec4 color;
+  mainImage(color, gl_FragCoord.xy);
+  gl_FragColor  = color;
+}`;
+
+      const uniforms: Uniforms = {
+        iTime: { value: 0 },
+        iResolution: { value: [1, 1] },
+
+        rayPos: { value: [0, 0] },
+        rayDir: { value: [0, 1] },
+
+        raysColor: { value: hexToRgb(raysColor) },
+        raysSpeed: { value: raysSpeed },
+        lightSpread: { value: lightSpread },
+        rayLength: { value: rayLength },
+        pulsating: { value: pulsating ? 1.0 : 0.0 },
+        fadeDistance: { value: fadeDistance },
+        saturation: { value: saturation },
+        mousePos: { value: [0.5, 0.5] },
+        mouseInfluence: { value: mouseInfluence },
+        noiseAmount: { value: noiseAmount },
+        distortion: { value: distortion },
+      };
+      uniformsRef.current = uniforms;
+
+      const geometry = new Triangle(gl);
+      const program = new Program(gl, {
+        vertex: vert,
+        fragment: frag,
+        uniforms,
+      });
+      const mesh = new Mesh(gl, { geometry, program });
+      meshRef.current = mesh;
+
+      const updatePlacement = () => {
+        if (!containerRef.current || !renderer) return;
+
+        renderer.dpr = Math.min(window.devicePixelRatio, 2);
+
+        const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
+        renderer.setSize(wCSS, hCSS);
+
+        const dpr = renderer.dpr;
+        const w = wCSS * dpr;
+        const h = hCSS * dpr;
+
+        uniforms.iResolution.value = [w, h];
+
+        const { anchor, dir } = getAnchorAndDir(raysOrigin, w, h);
+        uniforms.rayPos.value = anchor;
+        uniforms.rayDir.value = dir;
+      };
+
+      const loop = (t: number) => {
+        if (!rendererRef.current || !uniformsRef.current || !meshRef.current) {
+          return;
+        }
+
+        uniforms.iTime.value = t * 0.001;
+
+        if (followMouse && mouseInfluence > 0.0) {
+          const smoothing = 0.92;
+
+          smoothMouseRef.current.x =
+            smoothMouseRef.current.x * smoothing +
+            mouseRef.current.x * (1 - smoothing);
+          smoothMouseRef.current.y =
+            smoothMouseRef.current.y * smoothing +
+            mouseRef.current.y * (1 - smoothing);
+
+          uniforms.mousePos.value = [
+            smoothMouseRef.current.x,
+            smoothMouseRef.current.y,
+          ];
+        }
+
+        try {
+          renderer.render({ scene: mesh });
+          animationIdRef.current = requestAnimationFrame(loop);
+        } catch (error) {
+          console.warn('WebGL rendering error:', error);
+          return;
+        }
+      };
+
+      window.addEventListener('resize', updatePlacement);
+      updatePlacement();
+      animationIdRef.current = requestAnimationFrame(loop);
+
+      cleanupFunctionRef.current = () => {
+        if (animationIdRef.current) {
+          cancelAnimationFrame(animationIdRef.current);
+          animationIdRef.current = null;
+        }
+
+        window.removeEventListener('resize', updatePlacement);
+
+        if (renderer) {
+          try {
+            const canvas = renderer.gl.canvas;
+            const loseContextExt =
+              renderer.gl.getExtension('WEBGL_lose_context');
+            if (loseContextExt) {
+              loseContextExt.loseContext();
+            }
+
+            if (canvas?.parentNode) {
+              canvas.parentNode.removeChild(canvas);
+            }
+          } catch (error) {
+            console.warn('Error during WebGL cleanup:', error);
+          }
+        }
+
+        rendererRef.current = null;
+        uniformsRef.current = null;
+        meshRef.current = null;
+      };
+    };
+
+    initializeWebGL();
+
+    return () => {
+      if (cleanupFunctionRef.current) {
+        cleanupFunctionRef.current();
+        cleanupFunctionRef.current = null;
+      }
+    };
+  }, [
+    isVisible,
+    raysOrigin,
+    raysColor,
+    raysSpeed,
+    lightSpread,
+    rayLength,
+    pulsating,
+    fadeDistance,
+    saturation,
+    followMouse,
+    mouseInfluence,
+    noiseAmount,
+    distortion,
+  ]);
+
+  useEffect(() => {
+    if (!uniformsRef.current || !containerRef.current || !rendererRef.current)
+      return;
+
+    const u = uniformsRef.current;
+    const renderer = rendererRef.current;
+
+    u.raysColor.value = hexToRgb(raysColor);
+    u.raysSpeed.value = raysSpeed;
+    u.lightSpread.value = lightSpread;
+    u.rayLength.value = rayLength;
+    u.pulsating.value = pulsating ? 1.0 : 0.0;
+    u.fadeDistance.value = fadeDistance;
+    u.saturation.value = saturation;
+    u.mouseInfluence.value = mouseInfluence;
+    u.noiseAmount.value = noiseAmount;
+    u.distortion.value = distortion;
+
+    const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
+    const dpr = renderer.dpr;
+    const { anchor, dir } = getAnchorAndDir(raysOrigin, wCSS * dpr, hCSS * dpr);
+    u.rayPos.value = anchor;
+    u.rayDir.value = dir;
+  }, [
+    raysColor,
+    raysSpeed,
+    lightSpread,
+    raysOrigin,
+    rayLength,
+    pulsating,
+    fadeDistance,
+    saturation,
+    mouseInfluence,
+    noiseAmount,
+    distortion,
+  ]);
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!containerRef.current || !rendererRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = (e.clientX - rect.left) / rect.width;
+      const y = (e.clientY - rect.top) / rect.height;
+      mouseRef.current = { x, y };
+    };
+
+    if (followMouse) {
+      window.addEventListener('mousemove', handleMouseMove);
+      return () => window.removeEventListener('mousemove', handleMouseMove);
+    }
+  }, [followMouse]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`pointer-events-none relative z-[3] h-full w-full overflow-hidden ${className}`.trim()}
+    />
+  );
+};
+
+export default LightRays;

From ac1dd4d4bdd29752b4c793c47d721ab666d4fe5e Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Tue, 18 Aug 2026 00:16:08 +0200
Subject: [PATCH 07/32] refactor(website): clean up landing page sections

---
 .../src/components/I18nBenchmark/index.tsx    |  8 +--
 .../LandingPage/HeroSection/index.tsx         |  3 +-
 .../I18nBenchmarkSection/index.tsx            |  2 +-
 .../WhyToChoseIntlayerSection/index.tsx       | 24 +++++----
 .../src/components/LandingPage/index.tsx      | 54 +++++++++----------
 .../LanguageBackground/LanguageSection.tsx    | 24 ++++-----
 6 files changed, 56 insertions(+), 59 deletions(-)

diff --git a/apps/website/src/components/I18nBenchmark/index.tsx b/apps/website/src/components/I18nBenchmark/index.tsx
index 2f5cb78a82..58f82a8aaa 100644
--- a/apps/website/src/components/I18nBenchmark/index.tsx
+++ b/apps/website/src/components/I18nBenchmark/index.tsx
@@ -396,12 +396,13 @@ export const I18nBenchmark = ({
             )}
           </div>
           {!vertical && (
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col gap-4">
               <Link
                 label={seeBenchmark.value}
                 variant="button-outlined"
                 color="text"
-                size="sm"
+                size="md"
+                roundedSize="sm"
                 to={External_Github_i18n_benchmark}
               >
                 {seeBenchmark}
@@ -410,7 +411,8 @@ export const I18nBenchmark = ({
                 label={readFullReport.value}
                 variant="button"
                 color="text"
-                size="sm"
+                size="md"
+                roundedSize="sm"
                 to={Website_Benchmark_Path}
               >
                 <span className="flex items-center gap-1">
diff --git a/apps/website/src/components/LandingPage/HeroSection/index.tsx b/apps/website/src/components/LandingPage/HeroSection/index.tsx
index 62cdab4a38..0a3df45c48 100644
--- a/apps/website/src/components/LandingPage/HeroSection/index.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/index.tsx
@@ -76,7 +76,8 @@ export const HeroSection: FC = () => {
               <Link to={Website_ReleasesV9_Path} label={whatsNewLabel.value}>
                 <Tag
                   size="md"
-                  className="flex items-center gap-2 rounded-full border bg-card/10 font-medium text-foreground text-sm backdrop-blur-xl"
+                  border="with"
+                  className="flex items-center gap-2 rounded-full border-foreground/20! bg-card/10 font-medium text-foreground text-sm backdrop-blur-xl"
                 >
                   <Megaphone className="size-4" />
                   <span className="no-underline! flex items-center gap-1 font-medium text-sm sm:text-sm">
diff --git a/apps/website/src/components/LandingPage/I18nBenchmarkSection/index.tsx b/apps/website/src/components/LandingPage/I18nBenchmarkSection/index.tsx
index d9770cf213..52d3fd173b 100644
--- a/apps/website/src/components/LandingPage/I18nBenchmarkSection/index.tsx
+++ b/apps/website/src/components/LandingPage/I18nBenchmarkSection/index.tsx
@@ -2,7 +2,7 @@ import type { FC } from 'react';
 import { I18nBenchmark } from '~/components/I18nBenchmark';
 
 export const I18nBenchmarkSection: FC = () => (
-  <section className="flex flex-col gap-6 px-10">
+  <section className="flex flex-col gap-6 border-b p-10">
     <I18nBenchmark vertical={false} hideControls={true} />
   </section>
 );
diff --git a/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx b/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
index ec0ef74c30..92c704029d 100644
--- a/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
+++ b/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
@@ -16,27 +16,29 @@ export const WhyToChoseIntlayerSection: FC = () => {
   const { title, content } = useIntlayer('why-to-chose-intlayer-section');
 
   return (
-    <section className="my-10 flex w-full flex-col items-center justify-center">
-      <h2 className="text-neutral">{title}</h2>
+    <section className="flex w-full flex-col items-center justify-center gap-10 border-b py-10">
+      <h2 className="text-4xl">{title}</h2>
 
-      <div className="m-auto mt-3 grid w-full grid-cols-[auto_auto] place-items-center justify-evenly gap-x-2 gap-y-10 px-3 py-2 sm:grid-cols-[1fr_1fr_1fr]">
+      <div className="m-auto mt-3 grid w-full grid-cols-[auto_auto] place-items-center justify-evenly gap-x-2 gap-y-10 px-3 py-2 md:grid-cols-[1fr_1fr_1fr]">
         {content.map((asset) => {
           const Icon =
             iconKeyMap[asset.iconKey.value as keyof typeof iconKeyMap];
 
           return (
             <AnimatedDiv
-              className="flex max-w-45 flex-col items-center gap-3 self-start text-center md:max-w-50"
+              className="flex max-w-45 flex-col items-center gap-3 self-start p-6 text-center md:max-w-100"
               key={asset.title.value}
             >
-              <span className="flex size-12 items-center justify-center rounded-full border-4 border-lime-300 text-2xl text-lime-800 dark:border-lime-900 dark:text-lime-600">
-                <Icon className="size-5" />
-              </span>
-              <h3 className="font-semibold text-sm md:text-lg md:text-md">
-                {asset.title}
-              </h3>
+              <div className="flex w-full flex-col items-center gap-4 md:flex-row">
+                <span className="flex aspect-square size-12 items-center justify-center rounded-full border text-2xl">
+                  <Icon className="size-5 text-primary" />
+                </span>
+                <h3 className="w-full text-left text-md leading-6">
+                  {asset.title}
+                </h3>
+              </div>
               <AnimatedDiv>
-                <p className="text-neutral text-xs leading-5">
+                <p className="text-left text-muted-foreground text-sm leading-5">
                   {asset.description}
                 </p>
               </AnimatedDiv>
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index 209a9720c1..b3711d812d 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -64,7 +64,7 @@ export const LandingPage: FC = () => {
     <>
       <main
         aria-label={content.landingMainTitle.value}
-        className="flex flex-col gap-10"
+        className="flex flex-col"
       >
         <section aria-label={content.heroSection.value}>
           <HeroSection />
@@ -76,33 +76,31 @@ export const LandingPage: FC = () => {
           </Suspense>
         </section>
 
-        <div className="relative flex w-full flex-col gap-24 overflow-hidden bg-neutral/5 py-16 dark:bg-neutral-900/10">
-          <section aria-label={content.benchmarkSection.value}>
-            <Suspense fallback={<Loader />}>
-              <I18nBenchmarkSection />
-            </Suspense>
-          </section>
-
-          <section aria-label={content.supportedLanguagesSection.value}>
-            <Suspense fallback={<Loader />}>
-              <LanguageSection />
-            </Suspense>
-          </section>
-
-          <section aria-label={content.codeAuditSection.value}>
-            <Suspense fallback={<Loader />}>
-              <AuditSection />
-            </Suspense>
-          </section>
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 top-0 h-4 bg-background [clip-path:polygon(0_0,100%_0,0_100%)]"
-          />
-          <div
-            aria-hidden="true"
-            className="pointer-events-none absolute inset-x-0 bottom-0 h-4 bg-background [clip-path:polygon(100%_0,100%_100%,0_100%)]"
-          />
-        </div>
+        <section aria-label={content.benchmarkSection.value}>
+          <Suspense fallback={<Loader />}>
+            <I18nBenchmarkSection />
+          </Suspense>
+        </section>
+
+        <section aria-label={content.supportedLanguagesSection.value}>
+          <Suspense fallback={<Loader />}>
+            <LanguageSection />
+          </Suspense>
+        </section>
+
+        <section aria-label={content.codeAuditSection.value}>
+          <Suspense fallback={<Loader />}>
+            <AuditSection />
+          </Suspense>
+        </section>
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-x-0 top-0 h-4 bg-background [clip-path:polygon(0_0,100%_0,0_100%)]"
+        />
+        <div
+          aria-hidden="true"
+          className="pointer-events-none absolute inset-x-0 bottom-0 h-4 bg-background [clip-path:polygon(100%_0,100%_100%,0_100%)]"
+        />
 
         <section aria-label={content.productsSection.value}>
           <Suspense fallback={<Loader />}>
diff --git a/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx b/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
index f193cd415a..53518535d1 100644
--- a/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
+++ b/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
@@ -31,16 +31,13 @@ const shuffleArray = (array: string[], limit?: number) => {
 
 const LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (
   <div
-    className="group z-10 mx-8 inline-flex shrink-0 transition-transform duration-300 hover:scale-105"
+    className="group z-10 mx-8 inline-flex shrink-0 rounded-lg border transition-transform duration-300 hover:scale-105"
     {...props}
   >
-    <Container
-      roundedSize="xl"
-      className="flex flex-row items-center gap-5 p-3"
-    >
+    <div className="flex flex-row items-center gap-5 px-3 py-1">
       <Flag
         locale={locale as Locale}
-        className="max-h-5 max-w-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0"
+        className="size-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0"
         width={640}
         height={480}
         loading="lazy"
@@ -52,7 +49,7 @@ const LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (
       >
         {getLocaleName(locale as Locale)}
       </span>
-    </Container>
+    </div>
   </div>
 );
 
@@ -99,17 +96,14 @@ export const LanguageSection: FC<HTMLAttributes<HTMLElement>> = ({
 
   return (
     <section
-      className={cn(
-        'mask-[linear-gradient(to_right,transparent_0,black_128px,black_calc(100%-128px),transparent_100%)] my-10 w-full overflow-hidden',
-        className
-      )}
+      className={cn('w-full overflow-hidden border-b py-6', className)}
       {...props}
     >
       <div className="relative flex w-full flex-col gap-5 py-3">
-        <LocalCardList localeList={firstPart} className="horizontal-loop-1" />
-        <LocalCardList localeList={secondPart} className="horizontal-loop-2" />
-        <LocalCardList localeList={thirdPart} className="horizontal-loop-1" />
-        <LocalCardList localeList={fourthPart} className="horizontal-loop-2" />
+        <LocalCardList localeList={firstPart!} className="horizontal-loop-1" />
+        <LocalCardList localeList={secondPart!} className="horizontal-loop-2" />
+        <LocalCardList localeList={thirdPart!} className="horizontal-loop-1" />
+        <LocalCardList localeList={fourthPart!} className="horizontal-loop-2" />
       </div>
     </section>
   );

From 071b644d81bd076965037386d53a9b1f07b11abb Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Tue, 18 Aug 2026 19:28:03 +0200
Subject: [PATCH 08/32] refactor(website): rework landing page sections and
 components

---
 .../BlogPage/BlogCommentSection.tsx           |  6 +-
 .../src/components/BlogPage/BlogNavList.tsx   |  2 +-
 .../src/components/BlogPage/RelatedPosts.tsx  |  8 +--
 .../CMSLandingPage/ComingSoonSection.tsx      |  2 +-
 .../CMSLandingPage/ContentDeliverySection.tsx |  6 +-
 .../CMSLandingPage/FeaturesSection.tsx        |  2 +-
 .../CMSLandingPage/FinalCTASection.tsx        |  2 +-
 .../components/CMSLandingPage/HeroSection.tsx |  6 +-
 .../src/components/ChatBot/FileReference.tsx  |  2 +-
 apps/website/src/components/ChatBot/index.tsx |  7 ++-
 .../ApplicationNotRunningView.tsx             |  6 +-
 .../DictionaryEditionDrawer.tsx               |  4 +-
 .../NoApplicationURLView.tsx                  |  2 +-
 .../website/src/components/DemoPage/index.tsx |  6 +-
 .../ApplicationShowcaseMessage/index.tsx      |  2 +-
 .../ApplicationTemplateMessage/index.tsx      |  2 +-
 .../DocPage/ContributionMessage/index.tsx     |  2 +-
 .../DocPage/CopyMarkdownMessage/index.tsx     |  2 +-
 .../DocPage/DocHeader/DocHeader.tsx           | 12 ++--
 .../src/components/DocPage/DocNavList.tsx     |  4 +-
 .../src/components/DocPage/History/index.tsx  |  4 +-
 .../components/DocPage/MCPMessage/index.tsx   |  2 +-
 .../src/components/DocPage/ScrollWell.tsx     |  2 +-
 .../components/DocPage/Search/SearchView.tsx  |  6 +-
 .../DocPage/SummarizeAI/SummarizeAI.tsx       |  2 +-
 .../TranslatedContentMessage/index.tsx        |  2 +-
 .../DocPage/YoutubeVideoMessage/index.tsx     |  2 +-
 .../src/components/I18nBenchmark/LibCard.tsx  |  2 +-
 .../src/components/I18nBenchmark/index.tsx    | 12 ++--
 .../LandingPage/AuditSection/index.tsx        |  4 +-
 .../AvailableTechnoSection/index.tsx          |  4 +-
 .../LandingPage/ChatBotModal/index.tsx        |  9 ++-
 .../CommonQuestions.tsx                       | 22 +++----
 .../ContributorSection/ContributorCloud.tsx   |  4 +-
 .../LandingPage/DemoSection/index.tsx         | 24 ++++----
 .../CompilerSection/Visual.tsx                |  4 +-
 .../FeaturesSection/FrameworkSelector.tsx     |  2 +-
 .../FeaturesSection/IDESection/index.tsx      |  2 +-
 .../VisualEditorSection/index.tsx             |  2 +-
 .../LandingPage/FeaturesSection/index.tsx     | 12 ++--
 .../LandingPage/HeroSection/index.tsx         | 24 ++------
 .../ProductsSection/ProductSectionLayout.tsx  |  6 +-
 .../LandingPage/ProductsSection/index.tsx     | 13 ++--
 .../WhyToChoseIntlayerSection/index.tsx       |  2 +-
 .../src/components/LandingPage/index.tsx      | 20 +++----
 .../LocaleSwitcher/LocaleSwitcher.tsx         |  4 +-
 .../src/components/NotFoundComponent.tsx      |  2 +-
 .../src/components/ProductHunt/index.tsx      |  2 +-
 .../ScannerPage/Analyzer/AnalyzerLoading.tsx  |  2 +-
 .../Analyzer/Results/AnalyzerSiteResults.tsx  |  8 ++-
 .../Analyzer/Results/FieldItem.tsx            |  2 +-
 .../ScannerPage/AnalyzerResultsSection.tsx    |  4 +-
 .../TMSLandingPage/ComparisonSection.tsx      |  4 +-
 .../TMSLandingPage/FeaturesSection.tsx        |  2 +-
 .../components/TMSLandingPage/HeroSection.tsx |  6 +-
 .../TMSLandingPage/PainPointsSection.tsx      |  2 +-
 .../TableOfContents/TableOfContents.tsx       |  2 +-
 .../SwitchThemeSwitcher.tsx                   |  2 +-
 .../HowItWorksSection.tsx                     |  4 +-
 .../_docs/frequent-questions/index.tsx        |  2 +-
 .../{-$locale}/_playground/playground.tsx     |  2 +-
 .../routes/{-$locale}/i18n-seo-scanner.tsx    |  4 +-
 .../src/components/Button/Button.tsx          | 59 ++++++++-----------
 .../src/components/IDE/FileTree.tsx           |  2 +-
 .../design-system/src/components/IDE/IDE.tsx  | 14 ++---
 .../Pattern/GridDistortionPattern.tsx         |  2 +-
 .../src/components/Pattern/GridPattern.tsx    |  2 +-
 .../SwitchSelector/SwitchSelector.tsx         | 32 +++++-----
 .../@intlayer/design-system/styles/themes.css |  6 +-
 69 files changed, 209 insertions(+), 235 deletions(-)

diff --git a/apps/website/src/components/BlogPage/BlogCommentSection.tsx b/apps/website/src/components/BlogPage/BlogCommentSection.tsx
index 0778abd315..bdf9b41615 100644
--- a/apps/website/src/components/BlogPage/BlogCommentSection.tsx
+++ b/apps/website/src/components/BlogPage/BlogCommentSection.tsx
@@ -157,7 +157,7 @@ const CommentForm: FC<CommentFormProps> = ({
           </FormButton>
         </div>
 
-        <p className="text-neutral text-xs">
+        <p className="text-muted-foreground text-xs">
           {content.commentsAreModeratedAndWill}
         </p>
       </Form>
@@ -202,7 +202,7 @@ export const BlogCommentSection: FC<BlogCommentSectionProps> = ({
 
       {/* Approved comments list */}
       {comments.length === 0 && submitState !== 'success' ? (
-        <p className="mb-8 border-dotted text-neutral text-sm">
+        <p className="mb-8 border-dotted text-muted-foreground text-sm">
           {content.noCommentsYetBeThe}
         </p>
       ) : (
@@ -223,7 +223,7 @@ export const BlogCommentSection: FC<BlogCommentSectionProps> = ({
                   </span>
                   <time
                     dateTime={comment.createdAt}
-                    className="text-neutral text-xs"
+                    className="text-muted-foreground text-xs"
                   >
                     {formatDate(comment.createdAt)}
                   </time>
diff --git a/apps/website/src/components/BlogPage/BlogNavList.tsx b/apps/website/src/components/BlogPage/BlogNavList.tsx
index d1e28bc441..a9bfe290f1 100644
--- a/apps/website/src/components/BlogPage/BlogNavList.tsx
+++ b/apps/website/src/components/BlogPage/BlogNavList.tsx
@@ -136,7 +136,7 @@ export const BlogNavListContent: FC<BlogNavListProps> = ({
                           <div className="pl-3 text-sm">
                             {subSections2 &&
                               Object.keys(subSections2).length > 0 && (
-                                <div className="flex flex-col items-start gap-2 p-1 text-neutral transition-colors hover:text-foreground">
+                                <div className="flex flex-col items-start gap-2 p-1 text-muted-foreground transition-colors hover:text-foreground">
                                   {Object.keys(subSections2).map((key3) => {
                                     const section3Data = subSections2[key3];
                                     const slugs =
diff --git a/apps/website/src/components/BlogPage/RelatedPosts.tsx b/apps/website/src/components/BlogPage/RelatedPosts.tsx
index d49f90e93e..664ba50871 100644
--- a/apps/website/src/components/BlogPage/RelatedPosts.tsx
+++ b/apps/website/src/components/BlogPage/RelatedPosts.tsx
@@ -97,12 +97,12 @@ export const RelatedPosts: FC<RelatedPostsProps> = ({
                 {post.title}
               </p>
               {post.description && (
-                <p className="line-clamp-2 text-neutral text-xs">
+                <p className="line-clamp-2 text-muted-foreground text-xs">
                   {post.description}
                 </p>
               )}
               {post.author && (
-                <p className="mt-auto text-neutral text-xs">
+                <p className="mt-auto text-muted-foreground text-xs">
                   {post.author.name}
                 </p>
               )}
@@ -165,12 +165,12 @@ export const LastPosts: FC<LastPostsProps> = ({
                 {post.title}
               </p>
               {post.description && (
-                <p className="line-clamp-2 text-neutral text-xs">
+                <p className="line-clamp-2 text-muted-foreground text-xs">
                   {post.description}
                 </p>
               )}
               {post.author && (
-                <p className="mt-auto text-neutral text-xs">
+                <p className="mt-auto text-muted-foreground text-xs">
                   {post.author.name}
                 </p>
               )}
diff --git a/apps/website/src/components/CMSLandingPage/ComingSoonSection.tsx b/apps/website/src/components/CMSLandingPage/ComingSoonSection.tsx
index 42fe920a87..84e7663b55 100644
--- a/apps/website/src/components/CMSLandingPage/ComingSoonSection.tsx
+++ b/apps/website/src/components/CMSLandingPage/ComingSoonSection.tsx
@@ -40,7 +40,7 @@ export const ComingSoonSection: FC = () => {
                       </span>
                     )}
                   </h3>
-                  <p className="text-neutral text-sm leading-relaxed">
+                  <p className="text-muted-foreground text-sm leading-relaxed">
                     {feature.description}
                   </p>
                 </div>
diff --git a/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx b/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
index 1f2269655a..b4f2d39c7a 100644
--- a/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
+++ b/apps/website/src/components/CMSLandingPage/ContentDeliverySection.tsx
@@ -75,7 +75,7 @@ export const ContentDeliverySection: FC = () => {
           <h2 className="mb-4 font-bold text-3xl text-foreground sm:text-4xl">
             {deliveryTitle}
           </h2>
-          <p className="mx-auto max-w-2xl text-lg text-neutral">
+          <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
             {deliveryDescription}
           </p>
         </m.div>
@@ -116,7 +116,9 @@ export const ContentDeliverySection: FC = () => {
                 {mode.title}
               </h3>
 
-              <p className="text-neutral leading-relaxed">{mode.description}</p>
+              <p className="text-muted-foreground leading-relaxed">
+                {mode.description}
+              </p>
             </MotionContainer>
           ))}
         </m.div>
diff --git a/apps/website/src/components/CMSLandingPage/FeaturesSection.tsx b/apps/website/src/components/CMSLandingPage/FeaturesSection.tsx
index d29f2591f3..72c2fc6273 100644
--- a/apps/website/src/components/CMSLandingPage/FeaturesSection.tsx
+++ b/apps/website/src/components/CMSLandingPage/FeaturesSection.tsx
@@ -47,7 +47,7 @@ export const FeaturesSection: FC = () => {
                     </span>
                   )}
                 </h3>
-                <p className="text-neutral text-sm leading-relaxed">
+                <p className="text-muted-foreground text-sm leading-relaxed">
                   {feature.description}
                 </p>
               </div>
diff --git a/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx b/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
index b344b579ae..75b70073e4 100644
--- a/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
+++ b/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
@@ -30,7 +30,7 @@ export const FinalCTASection: FC = () => {
           <h2 className="mb-6 font-bold text-3xl text-foreground-opposite sm:text-4xl md:text-5xl">
             {finalCtaTitle}
           </h2>
-          <p className="mx-auto mb-10 max-w-xl text-lg text-neutral">
+          <p className="mx-auto mb-10 max-w-xl text-lg text-muted-foreground">
             {finalCtaDescription}
           </p>
           <motion.div
diff --git a/apps/website/src/components/CMSLandingPage/HeroSection.tsx b/apps/website/src/components/CMSLandingPage/HeroSection.tsx
index 84c981fc0a..e249c7b0ac 100644
--- a/apps/website/src/components/CMSLandingPage/HeroSection.tsx
+++ b/apps/website/src/components/CMSLandingPage/HeroSection.tsx
@@ -103,7 +103,7 @@ export const HeroSection: FC = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.2 }}
-              className="mb-8 font-medium text-neutral text-xl sm:text-2xl md:text-3xl"
+              className="mb-8 font-medium text-muted-foreground text-xl sm:text-2xl md:text-3xl"
             >
               {heroSubtitle}
             </m.h2>
@@ -113,7 +113,7 @@ export const HeroSection: FC = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.3 }}
-              className="mx-auto mb-12 max-w-3xl text-balance text-lg text-neutral leading-relaxed"
+              className="mx-auto mb-12 max-w-3xl text-balance text-lg text-muted-foreground leading-relaxed"
             >
               {heroDescription}
             </m.p>
@@ -183,7 +183,7 @@ export const HeroSection: FC = () => {
             className="relative w-full overflow-hidden shadow-2xl"
           >
             {/* Tab bar */}
-            <div className="flex w-full flex-row items-center justify-start gap-1 bg-neutral-200/20 text-neutral text-xs dark:bg-neutral-950/20">
+            <div className="flex w-full flex-row items-center justify-start gap-1 bg-neutral-200/20 text-muted-foreground text-xs dark:bg-neutral-950/20">
               <div className="mx-2 flex items-center justify-start gap-2 p-1">
                 <div className="size-3 rounded-full bg-error" />
                 <div className="size-3 rounded-full bg-yellow-500" />
diff --git a/apps/website/src/components/ChatBot/FileReference.tsx b/apps/website/src/components/ChatBot/FileReference.tsx
index 71b66ffd37..309a7b3db1 100644
--- a/apps/website/src/components/ChatBot/FileReference.tsx
+++ b/apps/website/src/components/ChatBot/FileReference.tsx
@@ -35,7 +35,7 @@ export const FileReference: FC<{
 
   return (
     <div className="pl-4">
-      <span className="text-neutral text-sm">{relatedFilesLabel}</span>
+      <span className="text-muted-foreground text-sm">{relatedFilesLabel}</span>
       <div className="flex min-w-full flex-row gap-2 overflow-x-auto pb-1">
         {uniqFiles.map((fileKey) => {
           const fileData = [...docData, ...blogData]?.find(
diff --git a/apps/website/src/components/ChatBot/index.tsx b/apps/website/src/components/ChatBot/index.tsx
index c0daee3eb0..c2c69e6394 100644
--- a/apps/website/src/components/ChatBot/index.tsx
+++ b/apps/website/src/components/ChatBot/index.tsx
@@ -263,13 +263,16 @@ export const ChatBot: FC<ChatBotProps> = ({
           additionalButtons={
             <>
               <PopoverStatic identifier="chat-info">
-                <InfoIcon size={18} className="z-50 mr-3 text-neutral" />
+                <InfoIcon
+                  size={18}
+                  className="z-50 mr-3 text-muted-foreground"
+                />
                 <PopoverStatic.Detail
                   identifier="chat-info"
                   xAlign={isLarge ? 'end' : 'center'}
                   yAlign="above"
                 >
-                  <p className="min-w-60 max-w-60 p-4 text-neutral text-xs">
+                  <p className="min-w-60 max-w-60 p-4 text-muted-foreground text-xs">
                     {disclaimerNote}
                   </p>
                 </PopoverStatic.Detail>
diff --git a/apps/website/src/components/Dashboard/Editor/ApplicationNotRunningView/ApplicationNotRunningView.tsx b/apps/website/src/components/Dashboard/Editor/ApplicationNotRunningView/ApplicationNotRunningView.tsx
index 4183ad1b4e..0db58e8b45 100644
--- a/apps/website/src/components/Dashboard/Editor/ApplicationNotRunningView/ApplicationNotRunningView.tsx
+++ b/apps/website/src/components/Dashboard/Editor/ApplicationNotRunningView/ApplicationNotRunningView.tsx
@@ -57,7 +57,7 @@ export const ApplicationNotRunningView: FC<ApplicationNotRunningViewProps> = ({
             <span className="ml-4 font-bold">-</span>
           )}
         </span>
-        <p className="mb-4 block text-neutral">{description}</p>
+        <p className="mb-4 block text-muted-foreground">{description}</p>
 
         {(errors?.length ?? 0) > 0 && (
           <Container
@@ -65,7 +65,7 @@ export const ApplicationNotRunningView: FC<ApplicationNotRunningViewProps> = ({
             borderColor="error"
             padding="md"
             background="none"
-            className="mb-6 flex flex-col gap-1 pb-3 font-mono text-neutral text-xs"
+            className="mb-6 flex flex-col gap-1 pb-3 font-mono text-muted-foreground text-xs"
           >
             {errors.map((error, index) => {
               if (error.type === 'connect') {
@@ -98,7 +98,7 @@ export const ApplicationNotRunningView: FC<ApplicationNotRunningViewProps> = ({
           <ul className="list-inside list-disc space-y-2 pl-3">
             {tips.map((tip, index) => (
               // biome-ignore lint/suspicious/noArrayIndexKey: static list
-              <li key={index} className="text-neutral">
+              <li key={index} className="text-muted-foreground">
                 {typeof tip === 'function'
                   ? tip({
                       editorUrl: (
diff --git a/apps/website/src/components/Dashboard/Editor/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx b/apps/website/src/components/Dashboard/Editor/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx
index dc18d3a28d..8e0211cd39 100644
--- a/apps/website/src/components/Dashboard/Editor/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx
+++ b/apps/website/src/components/Dashboard/Editor/DictionaryEditionDrawer/DictionaryEditionDrawer.tsx
@@ -96,7 +96,7 @@ export const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({
 
   if (!dictionary)
     return (
-      <span className="mx-auto my-10 text-neutral text-sm">
+      <span className="mx-auto my-10 text-muted-foreground text-sm">
         {displayedDictionaryLocalId
           ? focusedDictionaryNotFound
           : noDictionaryFocused}
@@ -131,7 +131,7 @@ export const DictionaryEditionDrawer: FC<DictionaryEditionDrawerProps> = ({
                 onClick={() => setEditionModalOpen(true)}
               />
               <Popover.Detail identifier="open-dictionary-editor">
-                <span className="whitespace-nowrap p-2 text-neutral text-xs">
+                <span className="whitespace-nowrap p-2 text-muted-foreground text-xs">
                   {openDictionaryEditor.popoverContent}
                 </span>
               </Popover.Detail>
diff --git a/apps/website/src/components/Dashboard/Editor/NoApplicationURLView/NoApplicationURLView.tsx b/apps/website/src/components/Dashboard/Editor/NoApplicationURLView/NoApplicationURLView.tsx
index b610f0a76e..012e43ab43 100644
--- a/apps/website/src/components/Dashboard/Editor/NoApplicationURLView/NoApplicationURLView.tsx
+++ b/apps/website/src/components/Dashboard/Editor/NoApplicationURLView/NoApplicationURLView.tsx
@@ -12,7 +12,7 @@ export const NoApplicationURLView: FC = () => {
   return (
     <div className="flex flex-1 flex-col items-center justify-center p-4">
       <H3 className="mb-4 text-lg">{title}</H3>
-      <p className="block text-neutral">{description}</p>
+      <p className="block text-muted-foreground">{description}</p>
       <Link
         label={documentationLink.label.value}
         to={`${Website_Doc_IntlayerCMS_Path}#configuration`}
diff --git a/apps/website/src/components/DemoPage/index.tsx b/apps/website/src/components/DemoPage/index.tsx
index aca28ebcc9..ec72f27353 100644
--- a/apps/website/src/components/DemoPage/index.tsx
+++ b/apps/website/src/components/DemoPage/index.tsx
@@ -14,7 +14,7 @@ const Item: FC<{
     </span>
     <div>
       <h3 className="mb-2 font-semibold text-lg">{title}</h3>
-      <p className="text-neutral text-sm leading-7">{description}</p>
+      <p className="text-muted-foreground text-sm leading-7">{description}</p>
     </div>
   </AnimatedDiv>
 );
@@ -25,7 +25,9 @@ export const DemoPage: FC = () => {
   return (
     <div className="m-auto flex w-full max-w-3xl flex-col p-8 sm:p-12 md:size-full md:p-10">
       <h1 className="mt-14 mb-3 font-bold text-4xl">{title}</h1>
-      <div className="py-10 text-md text-neutral">{landingParagraph}</div>
+      <div className="py-10 text-md text-muted-foreground">
+        {landingParagraph}
+      </div>
       <div className="relative mx-auto my-10 flex max-w-175 flex-col gap-28">
         <Item
           index={0}
diff --git a/apps/website/src/components/DocPage/ApplicationShowcaseMessage/index.tsx b/apps/website/src/components/DocPage/ApplicationShowcaseMessage/index.tsx
index ad1f790691..32680a2c7f 100644
--- a/apps/website/src/components/DocPage/ApplicationShowcaseMessage/index.tsx
+++ b/apps/website/src/components/DocPage/ApplicationShowcaseMessage/index.tsx
@@ -31,7 +31,7 @@ export const ApplicationShowcaseMessage: FC<
         className="flex min-w-64 flex-col gap-3 p-3 text-sm"
       >
         <strong>{title}</strong>
-        <p className="text-neutral">{description}</p>
+        <p className="text-muted-foreground">{description}</p>
       </PopoverStatic.Detail>
     </PopoverStatic>
   );
diff --git a/apps/website/src/components/DocPage/ApplicationTemplateMessage/index.tsx b/apps/website/src/components/DocPage/ApplicationTemplateMessage/index.tsx
index 2f5de862ad..404c4b32ab 100644
--- a/apps/website/src/components/DocPage/ApplicationTemplateMessage/index.tsx
+++ b/apps/website/src/components/DocPage/ApplicationTemplateMessage/index.tsx
@@ -31,7 +31,7 @@ export const ApplicationTemplateMessage: FC<
         className="flex min-w-64 flex-col gap-3 p-3 text-sm"
       >
         <strong>{title}</strong>
-        <p className="text-neutral">{description}</p>
+        <p className="text-muted-foreground">{description}</p>
       </PopoverStatic.Detail>
     </PopoverStatic>
   );
diff --git a/apps/website/src/components/DocPage/ContributionMessage/index.tsx b/apps/website/src/components/DocPage/ContributionMessage/index.tsx
index 13d7e61a04..68014591dd 100644
--- a/apps/website/src/components/DocPage/ContributionMessage/index.tsx
+++ b/apps/website/src/components/DocPage/ContributionMessage/index.tsx
@@ -26,7 +26,7 @@ export const ContributionMessage: FC<{ githubUrl: string }> = ({
         xAlign="end"
       >
         <strong>{contribution.title}</strong>
-        <p className="text-neutral">{contribution.text}</p>
+        <p className="text-muted-foreground">{contribution.text}</p>
         <Link
           to={githubUrl}
           label={contribution.buttonLabel.value}
diff --git a/apps/website/src/components/DocPage/CopyMarkdownMessage/index.tsx b/apps/website/src/components/DocPage/CopyMarkdownMessage/index.tsx
index 63c0e57171..eb1ac5ddd7 100644
--- a/apps/website/src/components/DocPage/CopyMarkdownMessage/index.tsx
+++ b/apps/website/src/components/DocPage/CopyMarkdownMessage/index.tsx
@@ -46,7 +46,7 @@ export const CopyMarkdownMessage: FC<CopyMarkdownMessageProps> = ({
         xAlign="end"
       >
         <strong>{title}</strong>
-        <p className="text-neutral">{description}</p>
+        <p className="text-muted-foreground">{description}</p>
       </PopoverStatic.Detail>
     </PopoverStatic>
   );
diff --git a/apps/website/src/components/DocPage/DocHeader/DocHeader.tsx b/apps/website/src/components/DocPage/DocHeader/DocHeader.tsx
index 4f8c446e9a..09b3f145f0 100644
--- a/apps/website/src/components/DocPage/DocHeader/DocHeader.tsx
+++ b/apps/website/src/components/DocPage/DocHeader/DocHeader.tsx
@@ -107,7 +107,7 @@ export const DocHeader: FC<DocHeaderProps> = ({
                   <Link
                     label={authorGithubLabel({ author: author.name })}
                     href={`https://github.com/${author.github}`}
-                    className="flex items-center gap-2 text-neutral"
+                    className="flex items-center gap-2 text-muted-foreground"
                   >
                     <Avatar
                       src={authorImageUrl}
@@ -118,7 +118,7 @@ export const DocHeader: FC<DocHeaderProps> = ({
                     {author.name}
                   </Link>
                 ) : (
-                  <span className="text-neutral">{author.name}</span>
+                  <span className="text-muted-foreground">{author.name}</span>
                 )}
                 <PopoverStatic.Detail
                   identifier="author-social-medias"
@@ -149,7 +149,7 @@ export const DocHeader: FC<DocHeaderProps> = ({
               <Link
                 label={authorGithubLabel({ author: author.name })}
                 href={`https://github.com/${author.github}`}
-                className="flex items-center gap-2 text-neutral"
+                className="flex items-center gap-2 text-muted-foreground"
               >
                 <Avatar
                   src={authorImageUrl}
@@ -160,7 +160,7 @@ export const DocHeader: FC<DocHeaderProps> = ({
                 {author.name}
               </Link>
             ) : (
-              <span className="text-neutral">{author.name}</span>
+              <span className="text-muted-foreground">{author.name}</span>
             )}
           </span>
         )}
@@ -168,13 +168,13 @@ export const DocHeader: FC<DocHeaderProps> = ({
           {createdAt && (
             <span className="block">
               {creationLabel}:
-              <span className="ml-2 text-neutral">{createdAt}</span>
+              <span className="ml-2 text-muted-foreground">{createdAt}</span>
             </span>
           )}
           {updatedAt && (
             <span className="block">
               {lastUpdateLabel}:
-              <span className="ml-2 text-neutral">{updatedAt}</span>
+              <span className="ml-2 text-muted-foreground">{updatedAt}</span>
             </span>
           )}
         </div>
diff --git a/apps/website/src/components/DocPage/DocNavList.tsx b/apps/website/src/components/DocPage/DocNavList.tsx
index 16792b9bbc..baabc862a5 100644
--- a/apps/website/src/components/DocPage/DocNavList.tsx
+++ b/apps/website/src/components/DocPage/DocNavList.tsx
@@ -57,7 +57,7 @@ export const OptionalLink: FC<OptionalLinkProps> = ({
     return (
       <span
         className={cn(
-          'flex w-full truncate text-nowrap p-2 text-left font-semibold text-neutral transition-color',
+          'flex w-full truncate text-nowrap p-2 text-left font-semibold text-muted-foreground transition-color',
           className
         )}
         {...props}
@@ -351,7 +351,7 @@ export const DocNavListContent: FC<DocNavListContentProps> = ({
                           <div className="pl-3 text-sm">
                             {subSections2 &&
                               Object.keys(subSections2).length > 0 && (
-                                <div className="flex flex-col items-start gap-2 p-1 text-neutral transition-colors hover:text-foreground">
+                                <div className="flex flex-col items-start gap-2 p-1 text-muted-foreground transition-colors hover:text-foreground">
                                   {Object.keys(subSections2).map((key3) => {
                                     const section3Data = subSections2[key3];
                                     const slugs =
diff --git a/apps/website/src/components/DocPage/History/index.tsx b/apps/website/src/components/DocPage/History/index.tsx
index 88463f498d..da2352efb6 100644
--- a/apps/website/src/components/DocPage/History/index.tsx
+++ b/apps/website/src/components/DocPage/History/index.tsx
@@ -56,7 +56,7 @@ export const History: FC<HistoryProps> = ({
       </div>
       <Popover.Detail
         identifier="outdated-translation"
-        className="flex min-w-64 flex-1 flex-col gap-2 p-3 text-neutral text-sm"
+        className="flex min-w-64 flex-1 flex-col gap-2 p-3 text-muted-foreground text-sm"
         xAlign="end"
       >
         {isOutdated && (
@@ -102,7 +102,7 @@ export const History: FC<HistoryProps> = ({
                 key={`${index}-${version}-${date}`}
               >
                 <span className="mt-1 text-foreground text-xs">{changes}</span>
-                <div className="flex flex-col items-end justify-between gap-1 px-2 py-1 text-neutral text-sm">
+                <div className="flex flex-col items-end justify-between gap-1 px-2 py-1 text-muted-foreground text-sm">
                   <span className="text-nowrap">v{version}</span>
                   {date && (
                     <span className="text-nowrap">
diff --git a/apps/website/src/components/DocPage/MCPMessage/index.tsx b/apps/website/src/components/DocPage/MCPMessage/index.tsx
index f0dd11c5e2..d0187baad7 100644
--- a/apps/website/src/components/DocPage/MCPMessage/index.tsx
+++ b/apps/website/src/components/DocPage/MCPMessage/index.tsx
@@ -28,7 +28,7 @@ export const MCPMessage: FC = () => {
         className="flex min-w-64 flex-col gap-3 p-3 text-sm"
       >
         <strong>{title}</strong>
-        <p className="text-neutral">{description}</p>
+        <p className="text-muted-foreground">{description}</p>
         <Link
           to={Website_Doc_MCP}
           label={link.label.value}
diff --git a/apps/website/src/components/DocPage/ScrollWell.tsx b/apps/website/src/components/DocPage/ScrollWell.tsx
index 2f40f99a55..dd9237de46 100644
--- a/apps/website/src/components/DocPage/ScrollWell.tsx
+++ b/apps/website/src/components/DocPage/ScrollWell.tsx
@@ -63,7 +63,7 @@ const Title: FC = () => {
     headingMap,
   });
   return (
-    <span className="w-full flex-1 truncate text-neutral text-xs">
+    <span className="w-full flex-1 truncate text-muted-foreground text-xs">
       {(activeParent && headingTexts.get(activeParent)) ?? ''}
     </span>
   );
diff --git a/apps/website/src/components/DocPage/Search/SearchView.tsx b/apps/website/src/components/DocPage/Search/SearchView.tsx
index 103d65d83c..30d57b62c6 100644
--- a/apps/website/src/components/DocPage/Search/SearchView.tsx
+++ b/apps/website/src/components/DocPage/Search/SearchView.tsx
@@ -102,7 +102,7 @@ const SearchResultItem: FC<{
       <div className="flex items-center justify-between gap-2 text-wrap p-3">
         <div className="flex flex-1 flex-col gap-2 text-left">
           <strong className="text-base">{doc.title}</strong>
-          <p className="text-neutral text-sm">{doc.description}</p>
+          <p className="text-muted-foreground text-sm">{doc.description}</p>
           <Breadcrumb links={breadcrumbLinks} className="text-xs opacity-30" />
         </div>
         <ArrowRight size={24} />
@@ -256,7 +256,9 @@ const SearchViewContent: FC<{
       </div>
       <div className="mt-8 flex flex-1 flex-col overflow-y-auto">
         {isNoResult && (
-          <p className="text-center text-neutral text-sm">{noContentText}</p>
+          <p className="text-center text-muted-foreground text-sm">
+            {noContentText}
+          </p>
         )}
         {results.length > 0 && (
           <ul className="flex flex-col gap-10">
diff --git a/apps/website/src/components/DocPage/SummarizeAI/SummarizeAI.tsx b/apps/website/src/components/DocPage/SummarizeAI/SummarizeAI.tsx
index f0d08d8699..06cdc07c64 100644
--- a/apps/website/src/components/DocPage/SummarizeAI/SummarizeAI.tsx
+++ b/apps/website/src/components/DocPage/SummarizeAI/SummarizeAI.tsx
@@ -110,7 +110,7 @@ export const SummarizeAI: FC<SummarizeAIProps> = ({ url }) => {
           </Link>
         ))}
 
-        <p className="text-neutral">{description}</p>
+        <p className="text-muted-foreground">{description}</p>
       </Popover.Detail>
     </Popover>
   );
diff --git a/apps/website/src/components/DocPage/TranslatedContentMessage/index.tsx b/apps/website/src/components/DocPage/TranslatedContentMessage/index.tsx
index 45d2e8a522..e4ae07e771 100644
--- a/apps/website/src/components/DocPage/TranslatedContentMessage/index.tsx
+++ b/apps/website/src/components/DocPage/TranslatedContentMessage/index.tsx
@@ -26,7 +26,7 @@ export const TranslatedContentMessage: FC<TranslatedContentMessageProps> = ({
       </div>
       <Popover.Detail
         identifier="language"
-        className="flex min-w-64 flex-1 flex-col gap-2 p-3 text-neutral text-sm"
+        className="flex min-w-64 flex-1 flex-col gap-2 p-3 text-muted-foreground text-sm"
         xAlign="end"
       >
         <p>{message}</p>
diff --git a/apps/website/src/components/DocPage/YoutubeVideoMessage/index.tsx b/apps/website/src/components/DocPage/YoutubeVideoMessage/index.tsx
index a7295f22bc..09a4ed535f 100644
--- a/apps/website/src/components/DocPage/YoutubeVideoMessage/index.tsx
+++ b/apps/website/src/components/DocPage/YoutubeVideoMessage/index.tsx
@@ -29,7 +29,7 @@ export const YoutubeVideoMessage: FC<YoutubeVideoMessageProps> = ({
         className="flex min-w-64 flex-col gap-3 p-3 text-sm"
       >
         <strong>{title}</strong>
-        <p className="text-neutral">{description}</p>
+        <p className="text-muted-foreground">{description}</p>
       </PopoverStatic.Detail>
     </PopoverStatic>
   );
diff --git a/apps/website/src/components/I18nBenchmark/LibCard.tsx b/apps/website/src/components/I18nBenchmark/LibCard.tsx
index e57082df69..efc929f1d6 100644
--- a/apps/website/src/components/I18nBenchmark/LibCard.tsx
+++ b/apps/website/src/components/I18nBenchmark/LibCard.tsx
@@ -63,7 +63,7 @@ export const LibCard: FC<{
             {lib.name}
           </span>
           {lib.version && (
-            <span className="whitespace-nowrap text-neutral text-xs leading-none">
+            <span className="whitespace-nowrap text-muted-foreground text-xs leading-none">
               v{lib.version}
             </span>
           )}
diff --git a/apps/website/src/components/I18nBenchmark/index.tsx b/apps/website/src/components/I18nBenchmark/index.tsx
index 58f82a8aaa..ac3df00de4 100644
--- a/apps/website/src/components/I18nBenchmark/index.tsx
+++ b/apps/website/src/components/I18nBenchmark/index.tsx
@@ -295,7 +295,7 @@ export const I18nBenchmark = ({
             {/* Framework selector */}
             {!initialFramework && (
               <div>
-                <p className="mb-10 font-bold text-base text-neutral">
+                <p className="mb-10 font-bold text-base text-muted-foreground">
                   {frameworkLabel}
                 </p>
                 <VerticalSwitchSelector
@@ -380,7 +380,7 @@ export const I18nBenchmark = ({
                   >
                     <div>
                       <p className="font-bold text-lg">{label}</p>
-                      <p className="text-neutral text-sm leading-snug">
+                      <p className="text-muted-foreground text-sm leading-snug">
                         {desc}
                       </p>
                     </div>
@@ -477,7 +477,7 @@ export const I18nBenchmark = ({
                       {errorLoadingData}
                     </div>
                   ) : chartData.length === 0 ? (
-                    <div className="flex h-full items-center justify-center text-neutral text-sm">
+                    <div className="flex h-full items-center justify-center text-muted-foreground text-sm">
                       {noData}
                     </div>
                   ) : renderMode === 'graph' ? (
@@ -525,7 +525,7 @@ export const I18nBenchmark = ({
                                   ? `${data.min.toFixed(1)} - ${data.max.toFixed(1)}`
                                   : '-'}
                               </td>
-                              <td className="px-4 py-2 text-neutral text-xs">
+                              <td className="px-4 py-2 text-muted-foreground text-xs">
                                 {data.version ? `v${data.version}` : '-'}
                               </td>
                             </tr>
@@ -565,14 +565,14 @@ export const I18nBenchmark = ({
                   <div className="flex flex-col gap-6">
                     <div className="flex flex-col gap-2">
                       <p className="font-bold text-lg">{whatIsThisMetric}</p>
-                      <p className="text-neutral-500 text-xs leading-relaxed dark:text-neutral">
+                      <p className="text-neutral-500 text-xs leading-relaxed dark:text-muted-foreground">
                         {selectedMetric?.whatIsIt}
                       </p>
                     </div>
 
                     <div className="flex flex-col gap-2">
                       <p className="font-bold text-lg">{whyItsImportant}</p>
-                      <p className="text-neutral-500 text-xs leading-relaxed dark:text-neutral">
+                      <p className="text-neutral-500 text-xs leading-relaxed dark:text-muted-foreground">
                         {selectedMetric?.whyItsImportant}
                       </p>
                     </div>
diff --git a/apps/website/src/components/LandingPage/AuditSection/index.tsx b/apps/website/src/components/LandingPage/AuditSection/index.tsx
index 94795f8f1e..2edd6bbaf3 100644
--- a/apps/website/src/components/LandingPage/AuditSection/index.tsx
+++ b/apps/website/src/components/LandingPage/AuditSection/index.tsx
@@ -18,11 +18,11 @@ export const AuditSection: FC = () => {
   };
 
   return (
-    <section className="flex w-full flex-col gap-16 overflow-hidden px-20 py-20">
+    <section className="flex w-full flex-col gap-16 overflow-hidden border-b px-20 py-20">
       <h2 className="mx-auto max-w-3xl text-center font-bold text-3xl text-foreground leading-tight sm:text-5xl md:text-5xl lg:text-5xl">
         {title}
       </h2>
-      <p className="m-auto max-w-2xl text-center text-lg text-neutral leading-relaxed">
+      <p className="m-auto max-w-2xl text-center text-lg text-muted-foreground leading-relaxed">
         {description}
       </p>
       <div className="m-auto flex w-full max-w-lg flex-col justify-end gap-2">
diff --git a/apps/website/src/components/LandingPage/AvailableTechnoSection/index.tsx b/apps/website/src/components/LandingPage/AvailableTechnoSection/index.tsx
index 55718a5e63..c72a69a7ad 100644
--- a/apps/website/src/components/LandingPage/AvailableTechnoSection/index.tsx
+++ b/apps/website/src/components/LandingPage/AvailableTechnoSection/index.tsx
@@ -234,9 +234,9 @@ export const AvailableTechnoSection: FC = () => {
   return (
     <section
       ref={containerRef}
-      className="z-10 flex w-full flex-col items-center justify-center overflow-hidden"
+      className="z-10 flex w-full flex-col items-center justify-center overflow-hidden border-b p-16"
     >
-      <h2 className="mb-3 text-lg text-neutral-500">{availableOn}</h2>
+      <h2 className="mb-3 text-3xl">{availableOn}</h2>
       <div className="my-10 flex flex-col items-center gap-6">
         {/* Row 1 */}
         <motion.div className="flex justify-center gap-x-4 md:gap-x-12">
diff --git a/apps/website/src/components/LandingPage/ChatBotModal/index.tsx b/apps/website/src/components/LandingPage/ChatBotModal/index.tsx
index 98f60e30b7..752f84f77f 100644
--- a/apps/website/src/components/LandingPage/ChatBotModal/index.tsx
+++ b/apps/website/src/components/LandingPage/ChatBotModal/index.tsx
@@ -40,13 +40,12 @@ export const ChatBotModal: FC = () => {
         )}
       </Modal>
       <Button
-        Icon={Bot}
-        className="fixed! right-5 bottom-5 z-50 rounded-full! opacity-70 hover:scale-110"
-        color="text"
+        className="fixed! right-5 bottom-5 z-50 rounded-full! hover:scale-110"
         size="icon-xl"
-        label={button.label.value}
         onClick={openModal}
-      />
+      >
+        <Bot />
+      </Button>
     </>
   );
 };
diff --git a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
index befcb75a46..b58413cfd7 100644
--- a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
+++ b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
@@ -27,14 +27,7 @@ const QuestionItem: FC<{
   }, [numberOfColumns, question.value]);
 
   return (
-    <Container
-      itemProp="mainEntity"
-      itemScope
-      itemType="https://schema.org/Question"
-      background="none"
-      border
-      roundedSize="xl"
-    >
+    <div className="rounded-sm border bg-card">
       <MaxHeightSmoother
         isOverable
         isFocusable
@@ -44,9 +37,10 @@ const QuestionItem: FC<{
         <div
           className={cn(
             'px-2 pt-3 sm:px-6',
-            numberOfColumns === 1 && 'w-[80vw]',
+            numberOfColumns === 1 && 'w-[85vw]',
             numberOfColumns === 2 && 'w-[40vw]',
-            numberOfColumns === 3 && 'w-[25vw]'
+            numberOfColumns === 3 && 'w-[20vw]'
+            /* What ? why not a grid */
           )}
         >
           <h3 className="text-wrap pb-4 font-bold text-base" itemProp="name">
@@ -57,7 +51,7 @@ const QuestionItem: FC<{
             itemProp="acceptedAnswer"
             itemScope
             itemType="https://schema.org/Answer"
-            className="text-neutral leading-8"
+            className="text-muted-foreground leading-8"
           >
             <span itemProp="text">{answer}</span>
             {callToAction && (
@@ -73,7 +67,7 @@ const QuestionItem: FC<{
           </div>
         </div>
       </MaxHeightSmoother>
-    </Container>
+    </div>
   );
 };
 
@@ -125,8 +119,8 @@ export const CommonQuestionsSection: FC = () => {
   const columns = distributeItemsIntoColumns(content as any[], numberOfColumns);
 
   return (
-    <section className="m-auto flex w-full max-w-6xl flex-col items-center justify-center">
-      <h2 className="text-neutral">{title}</h2>
+    <section className="m-auto flex w-full max-w-6xl flex-col items-center justify-center p-16">
+      <h2 className="text-3xl">{title}</h2>
 
       <div
         itemScope
diff --git a/apps/website/src/components/LandingPage/ContributorSection/ContributorCloud.tsx b/apps/website/src/components/LandingPage/ContributorSection/ContributorCloud.tsx
index 09e00630af..437c6192eb 100644
--- a/apps/website/src/components/LandingPage/ContributorSection/ContributorCloud.tsx
+++ b/apps/website/src/components/LandingPage/ContributorSection/ContributorCloud.tsx
@@ -242,14 +242,14 @@ export const ContributorCloud: FC<ContributorCloudProps> = ({
   return (
     <section
       ref={sectionRef}
-      className="relative w-full py-20 max-md:hidden md:py-32"
+      className="relative w-full border-b py-20 max-md:hidden md:py-32"
     >
       <div className="pointer-events-none mx-auto max-w-7xl p-5 px-4 md:px-8 lg:px-16">
         <div className="flex min-h-40 flex-col gap-12 md:flex-row md:items-center">
           <div className="pointer-events-none relative flex-1"></div>
           <div className="pointer-events-auto relative z-0 flex-1 space-y-6">
             <H2 className="mb-3 font-bold text-3xl sm:text-4xl">{title}</H2>
-            <p className="text-base text-neutral">{subtitle}</p>
+            <p className="text-base text-muted-foreground">{subtitle}</p>
             <div className="flex gap-2">
               <Link
                 to={External_Discord}
diff --git a/apps/website/src/components/LandingPage/DemoSection/index.tsx b/apps/website/src/components/LandingPage/DemoSection/index.tsx
index 0b6dc62488..56caf45f63 100644
--- a/apps/website/src/components/LandingPage/DemoSection/index.tsx
+++ b/apps/website/src/components/LandingPage/DemoSection/index.tsx
@@ -42,18 +42,20 @@ export const DemoSection: FC = () => {
   ] as SwitchSelectorChoices<DemoType>;
 
   return (
-    <section className="z-10 flex w-full flex-col items-center justify-center">
-      <h2 className="text-neutral">{title}</h2>
-
+    <section className="z-10 flex w-full flex-col items-center justify-center border-b p-16">
       <div className="my-6 flex w-full max-w-250 flex-col items-center gap-5 px-10 md:px-20">
-        <SwitchSelector
-          choices={demoSection}
-          defaultValue={demoType}
-          onChange={setDemoType}
-          itemClassName="text-nowrap"
-          color="text"
-          size="sm"
-        />
+        <div className="flex w-full items-center justify-between gap-4">
+          <h2 className="text-3xl">{title}</h2>
+          <SwitchSelector
+            choices={demoSection}
+            defaultValue={demoType}
+            onChange={setDemoType}
+            itemClassName="text-nowrap"
+            color="foreground"
+            size="sm"
+          />
+        </div>
+
         {demoType === DemoType.Nextjs && (
           <DemoCodeSandbox
             repoPath="/aymericzip/intlayer-next-16-template"
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/CompilerSection/Visual.tsx b/apps/website/src/components/LandingPage/FeaturesSection/CompilerSection/Visual.tsx
index 845d122272..91de0c2244 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/CompilerSection/Visual.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/CompilerSection/Visual.tsx
@@ -45,9 +45,9 @@ export const VisualEditorSection: FC<VisualEditorSectionProps> = ({
     useIntlayer('compiler-section', locale);
 
   return (
-    <div className="relative z-0 flex size-full flex-col justify-center gap-10 overflow-hidden rounded-r-2xl bg-neutral-50 p-6 text-center dark:bg-neutral-950">
+    <div className="relative z-0 flex size-full flex-col justify-center gap-10 overflow-hidden rounded-r-lg border bg-background p-6 text-center">
       <H3>{title}</H3>
-      <p className="text-neutral text-sm">{paragraph}</p>
+      <p className="text-muted-foreground text-sm">{paragraph}</p>
       <div className="absolute right-6 bottom-6">
         <Select value={locale} onValueChange={setManualLocale}>
           <Select.Trigger
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx b/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
index 7ca9698289..1538f8aef6 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
@@ -51,7 +51,7 @@ export const FrameworkSelector = ({ frameworks }: FrameworkSelectorProps) => {
       value={framework}
       onChange={setFramework}
       size="sm"
-      color="neutral"
+      color="secondary"
     />
   );
 };
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/index.tsx b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/index.tsx
index 7997423a61..69d7756e98 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/index.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/index.tsx
@@ -181,7 +181,7 @@ export const IDESection: FC<IDESectionProps> = ({ scrollProgress }) => {
           value={mode}
           onChange={setMode}
           size="sm"
-          color="neutral"
+          color="foreground"
           itemClassName="text-nowrap"
         />
         <FrameworkSelector />
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/VisualEditorSection/index.tsx b/apps/website/src/components/LandingPage/FeaturesSection/VisualEditorSection/index.tsx
index 883092b7dc..4dda9940bb 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/VisualEditorSection/index.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/VisualEditorSection/index.tsx
@@ -71,7 +71,7 @@ export const VisualEditorSection: FC = () => {
         />
       </video>
       <div className="flex w-full flex-col gap-4">
-        <span className="text-neutral text-sm">{description}</span>
+        <span className="text-muted-foreground text-sm">{description}</span>
         <Link
           href={getLocalizedUrl(Website_Playground_Path, locale)}
           target="_blank"
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/index.tsx b/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
index 2971afe2f0..f63f2e88de 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
@@ -43,10 +43,10 @@ const SectionDescription: FC<PropsWithChildren<SectionItemProps>> = ({
   isActive,
 }) => (
   <motion.p
-    className="flex size-full items-center justify-center px-16 text-neutral text-sm md:pr-0 lg:pr-16"
+    className="flex size-full items-center justify-center px-16 text-muted-foreground text-sm md:pr-0 lg:pr-16"
     initial={{ x: '-100%', opacity: 0 }}
     animate={{ x: isActive ? '0%' : '-100%', opacity: isActive ? 1 : 0 }}
-    transition={{ duration: 0.5, ease: 'easeInOut', delay: isActive ? 0.5 : 0 }}
+    transition={{ duration: 0.5, ease: 'easeInOut' }}
   >
     {children}
   </motion.p>
@@ -117,7 +117,7 @@ const Titles: FC<TitlesProps> = ({ sections, activeIndex, isMobile }) => (
     {sections.map((section, index) => (
       <motion.h3
         key={section.id.value}
-        className="absolute top-1/4 left-3 inline font-bold text-neutral text-xl leading-snug drop-shadow-sm aria-selected:text-foreground"
+        className="absolute top-1/4 left-3 inline font-bold text-muted-foreground text-xl leading-snug drop-shadow-sm aria-selected:text-foreground"
         initial={getTitlePlacement(index, INITIAL_ACTIVE_INDEX, isMobile)}
         animate={getTitlePlacement(index, activeIndex, isMobile)}
         role="tab"
@@ -218,7 +218,7 @@ export const FeaturesCarousel: FC<FeaturesCarouselProps> = ({
 
   return (
     <section
-      className="relative z-0 w-screen"
+      className="relative z-0 border-b"
       style={{
         // Make the entire container as tall as the number of sections * 150vh
         height: `${nbSections * 125}vh`,
@@ -229,7 +229,7 @@ export const FeaturesCarousel: FC<FeaturesCarouselProps> = ({
       <div className="sticky top-0 left-0 mb-[70vh] h-[30vh] w-full">
         {/* Progress Bar */}
         <div className="absolute top-20 left-10 flex h-3/5 w-0.5 md:top-[20vh]">
-          <div className="size-full rounded-full bg-neutral/20">
+          <div className="size-full rounded-full bg-border">
             <div
               className="w-full bg-text"
               style={{ height: `${progress * 100}%` }}
@@ -268,7 +268,7 @@ export const FeaturesCarousel: FC<FeaturesCarouselProps> = ({
         {sections.map((section, index) => (
           <div
             className={cn(
-              'absolute top-[37vh] left-0 z-0 h-[20vh] w-full overflow-hidden max-md:bg-background md:top-[50vh] md:h-[50vh] md:w-1/3',
+              'absolute top-[30vh] left-0 z-0 h-[20vh] w-full overflow-hidden max-md:bg-background md:top-[35vh] md:h-[50vh] md:w-1/3',
               index === activeIndex && 'z-10'
             )}
             key={section.id.value}
diff --git a/apps/website/src/components/LandingPage/HeroSection/index.tsx b/apps/website/src/components/LandingPage/HeroSection/index.tsx
index 0a3df45c48..a005e733ac 100644
--- a/apps/website/src/components/LandingPage/HeroSection/index.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/index.tsx
@@ -20,7 +20,7 @@ import {
 import { useTheme } from 'next-themes';
 import type { FC } from 'react';
 import { useIntlayer } from 'react-intlayer';
-import LightRays from '~/components/LightRays';
+import { BackgroundLayout } from '~/components/BackgroundLayout';
 import { Link } from '~/components/Link/Link';
 import packageJSON from '../../../../package_mock.json' with { type: 'json' };
 import { TechLogos } from './TechLogos';
@@ -48,23 +48,7 @@ export const HeroSection: FC = () => {
   return (
     <section className="relative flex min-h-[calc(100vh-60px)] flex-col">
       <section className="relative flex w-full flex-1 flex-col border-b px-4 md:px-8 lg:px-12">
-        <div className="pointer-events-none absolute inset-0 -z-1 hidden dark:block">
-          <LightRays
-            raysOrigin="top-center"
-            raysColor="#ffe1ff"
-            raysSpeed={0.8}
-            lightSpread={0.5}
-            rayLength={3}
-            followMouse={true}
-            mouseInfluence={0.1}
-            noiseAmount={0}
-            distortion={0}
-            className="custom-rays"
-            pulsating={false}
-            fadeDistance={1}
-            saturation={1}
-          />
-        </div>
+        <BackgroundLayout />
         <div className="flex flex-1 flex-col items-center justify-center py-16">
           {SHOW_WHATS_NEW && (
             <motion.div
@@ -98,7 +82,7 @@ export const HeroSection: FC = () => {
             initial={{ filter: 'blur(10px)', opacity: 0, y: 30 }}
             animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.5 }}
-            className="mb-6 text-center font-semibold text-primary text-xl sm:text-3xl md:text-3xl lg:mb-8 lg:text-4xl"
+            className="mb-6 text-center font-semibold text-xl sm:text-3xl md:text-3xl lg:mb-8 lg:text-4xl"
           >
             {subheading}
           </motion.h2>
@@ -134,7 +118,7 @@ export const HeroSection: FC = () => {
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.6, duration: 0.6 }}
-            className="mx-auto max-w-xl text-center text-justify text-muted-foreground text-sm leading-relaxed sm:text-lg lg:mb-12"
+            className="mx-auto max-w-xl text-center text-muted-foreground text-sm leading-relaxed sm:text-lg lg:mb-12"
           >
             {description}
           </motion.p>
diff --git a/apps/website/src/components/LandingPage/ProductsSection/ProductSectionLayout.tsx b/apps/website/src/components/LandingPage/ProductsSection/ProductSectionLayout.tsx
index cf09db7243..d5925ae197 100644
--- a/apps/website/src/components/LandingPage/ProductsSection/ProductSectionLayout.tsx
+++ b/apps/website/src/components/LandingPage/ProductsSection/ProductSectionLayout.tsx
@@ -1,4 +1,4 @@
-import { Tag } from '@intlayer/design-system/tag';
+import { Tag, type TagColor } from '@intlayer/design-system/tag';
 import { ArrowRightIcon } from 'lucide-react';
 import type { FC, ReactNode } from 'react';
 import { Link } from '~/components/Link/Link';
@@ -29,7 +29,7 @@ export const ProductSectionLayout: FC<ProductSectionLayoutProps> = ({
       <Tag
         size="sm"
         border="with"
-        color={tagColor}
+        color={tagColor as any /* shhhtt */}
         className="mb-6 rounded-full border font-medium text-sm"
       >
         {tag}
@@ -41,7 +41,7 @@ export const ProductSectionLayout: FC<ProductSectionLayoutProps> = ({
       </h2>
 
       {/* Description */}
-      <div className="mb-10 grow text-left text-neutral leading-relaxed">
+      <div className="mb-10 grow text-left text-muted-foreground leading-relaxed">
         {description}
       </div>
 
diff --git a/apps/website/src/components/LandingPage/ProductsSection/index.tsx b/apps/website/src/components/LandingPage/ProductsSection/index.tsx
index 77efaf505d..636b2e74cd 100644
--- a/apps/website/src/components/LandingPage/ProductsSection/index.tsx
+++ b/apps/website/src/components/LandingPage/ProductsSection/index.tsx
@@ -46,19 +46,14 @@ export const ProductsSection: FC = () => {
   return (
     <div
       ref={sectionRef}
-      className="flex min-h-[75vh] w-full items-center justify-center overflow-hidden"
+      className="flex min-h-[75vh] w-full items-center justify-center overflow-hidden border-b"
     >
-      <Carousel initialIndex={1}>
+      <Carousel initialIndex={1} className="space-y-10">
         {PRODUCTS.map(({ Component, key }) => (
           <Carousel.Item key={key}>
-            <Container
-              roundedSize="3xl"
-              background="with"
-              transparency="xs"
-              className="max-w-2xl p-6"
-            >
+            <div className="max-w-2xl rounded-2xl border bg-card p-6">
               <Component />
-            </Container>
+            </div>
           </Carousel.Item>
         ))}
 
diff --git a/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx b/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
index 92c704029d..0517e282e0 100644
--- a/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
+++ b/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
@@ -31,7 +31,7 @@ export const WhyToChoseIntlayerSection: FC = () => {
             >
               <div className="flex w-full flex-col items-center gap-4 md:flex-row">
                 <span className="flex aspect-square size-12 items-center justify-center rounded-full border text-2xl">
-                  <Icon className="size-5 text-primary" />
+                  <Icon className="size-5 text-foreground" />
                 </span>
                 <h3 className="w-full text-left text-md leading-6">
                   {asset.title}
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index b3711d812d..cfd2380d40 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -70,6 +70,12 @@ export const LandingPage: FC = () => {
           <HeroSection />
         </section>
 
+        <section aria-label={content.keyFeaturesSection.value}>
+          <Suspense fallback={<Loader />}>
+            <FeaturesSection />
+          </Suspense>
+        </section>
+
         <section aria-label={content.whyChooseIntlayerSection.value}>
           <Suspense fallback={<Loader />}>
             <WhyToChoseIntlayerSection />
@@ -93,14 +99,6 @@ export const LandingPage: FC = () => {
             <AuditSection />
           </Suspense>
         </section>
-        <div
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-x-0 top-0 h-4 bg-background [clip-path:polygon(0_0,100%_0,0_100%)]"
-        />
-        <div
-          aria-hidden="true"
-          className="pointer-events-none absolute inset-x-0 bottom-0 h-4 bg-background [clip-path:polygon(100%_0,100%_100%,0_100%)]"
-        />
 
         <section aria-label={content.productsSection.value}>
           <Suspense fallback={<Loader />}>
@@ -136,11 +134,7 @@ export const LandingPage: FC = () => {
 
 /*
 
-<section aria-label={content.keyFeaturesSection.value}>
-  <Suspense fallback={<Loader />}>
-    <FeaturesSection />
-  </Suspense>
-</section>
+
 
 
 */
diff --git a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
index 85419e1dd4..4ab904fe7d 100644
--- a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
+++ b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
@@ -129,13 +129,13 @@ export const LocaleSwitcher: FC<LocaleSwitcherProps> = ({
                             {ownLocaleName}
                           </span>
                           <span
-                            className="text-neutral text-xs"
+                            className="text-muted-foreground text-xs"
                             suppressHydrationWarning
                           >
                             {currentLocaleName}
                           </span>
                         </div>
-                        <span className="text-nowrap text-neutral text-sm">
+                        <span className="text-nowrap text-muted-foreground text-sm">
                           {localeItem.toUpperCase()}
                         </span>
                       </div>
diff --git a/apps/website/src/components/NotFoundComponent.tsx b/apps/website/src/components/NotFoundComponent.tsx
index dab6275af6..29cbbb1c87 100644
--- a/apps/website/src/components/NotFoundComponent.tsx
+++ b/apps/website/src/components/NotFoundComponent.tsx
@@ -9,7 +9,7 @@ export function NotFoundComponent() {
       <h1 className="mb-4 font-bold text-6xl text-foreground">
         Page not found
       </h1>
-      <p className="mb-8 max-w-md text-base text-neutral">
+      <p className="mb-8 max-w-md text-base text-muted-foreground">
         The page you&apos;re looking for doesn&apos;t exist or has been moved.
       </p>
       <Link to="/" color="text" variant="button" label="Back to home">
diff --git a/apps/website/src/components/ProductHunt/index.tsx b/apps/website/src/components/ProductHunt/index.tsx
index f5b29b17d8..3248954a66 100644
--- a/apps/website/src/components/ProductHunt/index.tsx
+++ b/apps/website/src/components/ProductHunt/index.tsx
@@ -162,7 +162,7 @@ export const ProductHunt: FC = () => {
             <div className="flex w-72 flex-col gap-2 overflow-hidden rounded-lg">
               <strong className="text-xl uppercase">{title}</strong>
               <span>{content}</span>
-              <span className="text-neutral text-sm">{details}</span>
+              <span className="text-muted-foreground text-sm">{details}</span>
             </div>
           </MaxWidthSmoother>
         </div>
diff --git a/apps/website/src/components/ScannerPage/Analyzer/AnalyzerLoading.tsx b/apps/website/src/components/ScannerPage/Analyzer/AnalyzerLoading.tsx
index e30c0e3eae..043f07b7bf 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/AnalyzerLoading.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/AnalyzerLoading.tsx
@@ -16,7 +16,7 @@ export const AnalyzerLoading: FC<AnalyzerLoadingProps> = ({
         style={{ width: `${progress}%` }}
       />
     </div>
-    <p className="mt-3 animate-pulse text-center text-neutral text-sm">
+    <p className="mt-3 animate-pulse text-center text-muted-foreground text-sm">
       {currentStep}
     </p>
   </div>
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
index e3fcf215ea..6616a6a29c 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/AnalyzerSiteResults.tsx
@@ -74,12 +74,14 @@ export const AnalyzerSiteResults: FC<AnalyzerSiteResultsProps> = ({
     <div className="flex flex-col pb-6">
       <div className="mb-4 flex items-center justify-between">
         <span className="font-semibold text-2xl text-foreground/70">
-          <span className="mr-2 text-neutral">{scoreTitle?.title}:</span>
+          <span className="mr-2 text-muted-foreground">
+            {scoreTitle?.title}:
+          </span>
 
           <Skeleton isLoading={isLoading && !score}>
             <span className="mr-1 text-foreground">{score ?? 0}</span>
           </Skeleton>
-          <span className="text-neutral text-sm">/100</span>
+          <span className="text-muted-foreground text-sm">/100</span>
         </span>
 
         <Skeleton isLoading={isLoading && !score}>
@@ -125,7 +127,7 @@ export const AnalyzerSiteResults: FC<AnalyzerSiteResultsProps> = ({
             className="mb-2 h-4 w-full"
             isLoading={isLoading && !domainData?.description}
           >
-            <p className="text-neutral text-sm">
+            <p className="text-muted-foreground text-sm">
               {domainData?.description ?? messages?.noDescription}
             </p>
           </Skeleton>
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/FieldItem.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/FieldItem.tsx
index a149e6035f..e65f7b9faa 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/FieldItem.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/FieldItem.tsx
@@ -132,7 +132,7 @@ export const FieldItem: FC<FieldItemProps> = ({
   isLoading,
   children,
 }) => (
-  <div className="grid grid-cols-[auto_auto_1fr_auto] items-center gap-2 rounded-lg px-2 py-1 text-neutral">
+  <div className="grid grid-cols-[auto_auto_1fr_auto] items-center gap-2 rounded-lg px-2 py-1 text-muted-foreground">
     {icon}
     <strong className="min-w-28">{label}:</strong>
     <span className="flex items-center justify-end gap-2 text-left text-foreground/70">
diff --git a/apps/website/src/components/ScannerPage/AnalyzerResultsSection.tsx b/apps/website/src/components/ScannerPage/AnalyzerResultsSection.tsx
index 3ee6e19851..cdfd3627d8 100644
--- a/apps/website/src/components/ScannerPage/AnalyzerResultsSection.tsx
+++ b/apps/website/src/components/ScannerPage/AnalyzerResultsSection.tsx
@@ -92,7 +92,9 @@ export const AnalyzerResultsSection: FC<AnalyzerResultsSectionProps> = ({
       />
       {showFullSiteButton && (
         <div className="mt-6 flex flex-col items-center gap-4 border-neutral border-t border-dotted pt-6">
-          <p className="text-neutral text-sm">{wantToAnalyzeFullSite}</p>
+          <p className="text-muted-foreground text-sm">
+            {wantToAnalyzeFullSite}
+          </p>
           {isLoggedIn ? (
             <Button
               onClick={onDiscoverUrls}
diff --git a/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx b/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
index e5251efcb2..940f9559c6 100644
--- a/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
@@ -36,7 +36,7 @@ export const ComparisonSection: FC = () => {
           className="overflow-hidden p-0"
         >
           {/* Header */}
-          <div className="grid grid-cols-3 bg-neutral/5 p-6 font-semibold text-neutral">
+          <div className="grid grid-cols-3 bg-neutral/5 p-6 font-semibold text-muted-foreground">
             <div className="col-span-1">{comparisonHeaders.feature}</div>
             <div className="col-span-1 font-bold text-foreground">
               {comparisonHeaders.intlayer}
@@ -66,7 +66,7 @@ export const ComparisonSection: FC = () => {
                 </div>
 
                 {/* Others Column */}
-                <div className="col-span-1 flex items-center gap-2 text-neutral">
+                <div className="col-span-1 flex items-center gap-2 text-muted-foreground">
                   <Minus className="size-4 text-neutral/40" />
                   {row.others}
                 </div>
diff --git a/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx b/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
index e7e59f1e3b..9d85bc1bc3 100644
--- a/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/FeaturesSection.tsx
@@ -99,7 +99,7 @@ export const FeaturesSection: FC = () => {
                 <h3 className="mb-2 font-semibold text-foreground text-xl">
                   {feature.title}
                 </h3>
-                <p className="text-neutral leading-relaxed">
+                <p className="text-muted-foreground leading-relaxed">
                   {feature.description}
                 </p>
               </div>
diff --git a/apps/website/src/components/TMSLandingPage/HeroSection.tsx b/apps/website/src/components/TMSLandingPage/HeroSection.tsx
index 9728a06ed4..4cf9fe10c0 100644
--- a/apps/website/src/components/TMSLandingPage/HeroSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/HeroSection.tsx
@@ -99,7 +99,7 @@ export const HeroSection: FC = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.2 }}
-              className="mb-8 font-medium text-neutral text-xl sm:text-2xl md:text-3xl"
+              className="mb-8 font-medium text-muted-foreground text-xl sm:text-2xl md:text-3xl"
             >
               {heroSubtitle}
             </m.h2>
@@ -108,7 +108,7 @@ export const HeroSection: FC = () => {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.3 }}
-              className="mx-auto mb-12 max-w-3xl text-balance text-lg text-neutral leading-relaxed"
+              className="mx-auto mb-12 max-w-3xl text-balance text-lg text-muted-foreground leading-relaxed"
             >
               {heroDescription}
             </m.p>
@@ -177,7 +177,7 @@ export const HeroSection: FC = () => {
             className="relative w-full overflow-hidden shadow-2xl"
           >
             {/* Tab bar */}
-            <div className="flex w-full flex-row items-center justify-start gap-1 bg-neutral-200/20 text-neutral text-xs dark:bg-neutral-950/20">
+            <div className="flex w-full flex-row items-center justify-start gap-1 bg-neutral-200/20 text-muted-foreground text-xs dark:bg-neutral-950/20">
               <div className="mx-2 flex items-center justify-start gap-2 p-1">
                 <div className="size-3 rounded-full bg-error" />
                 <div className="size-3 rounded-full bg-yellow-500" />
diff --git a/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx b/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
index b1a6dd1675..f2bbb37e5f 100644
--- a/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/PainPointsSection.tsx
@@ -70,7 +70,7 @@ export const PainPointsSection: FC = () => {
               <h3 className="mb-3 font-semibold text-foreground text-xl">
                 {point.title}
               </h3>
-              <p className="text-neutral leading-relaxed">
+              <p className="text-muted-foreground leading-relaxed">
                 {point.description}
               </p>
             </MotionContainer>
diff --git a/apps/website/src/components/TableOfContents/TableOfContents.tsx b/apps/website/src/components/TableOfContents/TableOfContents.tsx
index b8f3528ec8..432aed028e 100644
--- a/apps/website/src/components/TableOfContents/TableOfContents.tsx
+++ b/apps/website/src/components/TableOfContents/TableOfContents.tsx
@@ -128,7 +128,7 @@ export const TableOfContents: FC<TableOfContentsProps> = ({
                 color="text"
                 isPageSection
                 variant="hoverable"
-                className="flex w-full items-center justify-between text-wrap p-2 pr-4 text-base text-neutral transition-colors"
+                className="flex w-full items-center justify-between text-wrap p-2 pr-4 text-base text-muted-foreground transition-colors"
               >
                 {title}
               </Link>
diff --git a/apps/website/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx b/apps/website/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
index e1e0bdd5cf..71fc5d20d1 100644
--- a/apps/website/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
+++ b/apps/website/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
@@ -40,7 +40,7 @@ export const SwitchThemeSwitcher: FC = () => {
       choices={themeSwitcher}
       value={resolvedTheme}
       onChange={setTheme}
-      color="text"
+      color="foreground"
       size="sm"
     />
   );
diff --git a/apps/website/src/components/TranslationLandingPage/HowItWorksSection.tsx b/apps/website/src/components/TranslationLandingPage/HowItWorksSection.tsx
index e19f8e67ec..d48645b61e 100644
--- a/apps/website/src/components/TranslationLandingPage/HowItWorksSection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/HowItWorksSection.tsx
@@ -74,12 +74,12 @@ export const HowItWorksSection: FC = () => {
                     <span className="flex size-8 items-center justify-center rounded-full border-4 border-lime-300 text-lg text-lime-800 dark:border-lime-900 dark:text-lime-600">
                       {s.step}
                     </span>
-                    <IconComponent className="size-6 text-neutral" />
+                    <IconComponent className="size-6 text-muted-foreground" />
                   </div>
                   <h3 className="font-semibold text-sm md:text-lg">
                     {s.title}
                   </h3>
-                  <p className="text-neutral text-xs leading-5">
+                  <p className="text-muted-foreground text-xs leading-5">
                     {s.description}
                   </p>
                 </Container>
diff --git a/apps/website/src/routes/{-$locale}/_docs/frequent-questions/index.tsx b/apps/website/src/routes/{-$locale}/_docs/frequent-questions/index.tsx
index 02aa58f46e..9183698673 100644
--- a/apps/website/src/routes/{-$locale}/_docs/frequent-questions/index.tsx
+++ b/apps/website/src/routes/{-$locale}/_docs/frequent-questions/index.tsx
@@ -93,7 +93,7 @@ function FrequentQuestionsPage() {
             <Container className="flex flex-row items-center justify-between p-3">
               <div className="flex flex-col gap-2">
                 <strong>{frequentQuestion.title}</strong>
-                <p className="text-neutral text-sm">
+                <p className="text-muted-foreground text-sm">
                   {frequentQuestion.description}
                 </p>
               </div>
diff --git a/apps/website/src/routes/{-$locale}/_playground/playground.tsx b/apps/website/src/routes/{-$locale}/_playground/playground.tsx
index 13daee9954..d594b5f1c2 100644
--- a/apps/website/src/routes/{-$locale}/_playground/playground.tsx
+++ b/apps/website/src/routes/{-$locale}/_playground/playground.tsx
@@ -98,7 +98,7 @@ function PlaygroundPage() {
   return (
     <DashboardContentLayout title={title}>
       <BackgroundLayout />
-      <p className="m-auto my-3 max-w-3xl px-10 text-neutral text-sm">
+      <p className="m-auto my-3 max-w-3xl px-10 text-muted-foreground text-sm">
         {description}
       </p>
       <div className="relative flex flex-1 flex-col items-center px-10 pb-5">
diff --git a/apps/website/src/routes/{-$locale}/i18n-seo-scanner.tsx b/apps/website/src/routes/{-$locale}/i18n-seo-scanner.tsx
index e8da935dc0..a1035cc0c9 100644
--- a/apps/website/src/routes/{-$locale}/i18n-seo-scanner.tsx
+++ b/apps/website/src/routes/{-$locale}/i18n-seo-scanner.tsx
@@ -109,7 +109,9 @@ function AuditContent() {
         <h1 className="max-w-3xl text-center font-bold text-3xl text-foreground leading-tight sm:text-5xl md:text-5xl lg:text-5xl">
           {title}
         </h1>
-        <p className="max-w-2xl text-neutral leading-relaxed">{description}</p>
+        <p className="max-w-2xl text-muted-foreground leading-relaxed">
+          {description}
+        </p>
         <LocalizationAnalyzer />
       </main>
     </div>
diff --git a/packages/@intlayer/design-system/src/components/Button/Button.tsx b/packages/@intlayer/design-system/src/components/Button/Button.tsx
index e68416f888..6cd7f48501 100644
--- a/packages/@intlayer/design-system/src/components/Button/Button.tsx
+++ b/packages/@intlayer/design-system/src/components/Button/Button.tsx
@@ -59,11 +59,10 @@ export type ButtonColor =
   | 'primary'
   | 'secondary'
   | 'neutral'
-  | 'light'
-  | 'dark'
-  | 'text'
-  | 'card'
-  | 'text-inverse'
+  | 'white'
+  | 'black'
+  | 'foreground'
+  | 'background'
   | 'current'
   | 'error'
   | 'success'
@@ -77,6 +76,7 @@ export type ButtonTextAlign = 'left' | 'center' | 'right';
 /**
  * Enhanced button variants with improved accessibility and focus states
  */
+
 export const buttonVariants = cva(
   'relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
   {
@@ -93,25 +93,20 @@ export const buttonVariants = cva(
         'icon-xl': 'p-3',
         custom: '',
       },
+      // color fixe la "currentColor" (reprise par bg-current dans variant.default)
+      // + la couleur de contraste des enfants (icônes, texte, loader)
       color: {
-        primary:
-          'hover-primary-500/20 text-primary ring-primary-500/20 *:text-foreground-light',
+        primary: 'text-primary ring-primary/20 *:text-primary-foreground',
         secondary:
-          'hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-foreground-light',
-        neutral: 'text-neutral ring-neutral-500/5 *:text-foreground-light',
-        card: 'hover-card-500/20 text-card-foreground ring-card-500/20 *:text-foreground-light',
-        light:
-          'hover-white-500/20 text-white ring-white/20 *:text-foreground-light',
-        dark: 'text-neutral-800 ring-text-light/50 *:text-foreground-light',
-        text: 'text-foreground ring-text/20 *:text-foreground-opposite',
-        current:
-          'hover-current-500/10 text-current ring-current/10 *:text-foreground-light',
-        'text-inverse':
-          'text-foreground-opposite ring-text-opposite/20 *:text-foreground',
-        error:
-          'hover-error-500/20 text-error ring-error/20 *:text-foreground-light',
-        success:
-          'hover-success-500/20 text-success ring-success/20 *:text-foreground-light',
+          'text-secondary ring-secondary/20 *:text-secondary-foreground',
+        neutral: 'text-neutral ring-neutral/20 *:text-white',
+        white: 'text-white ring-white/20 *:text-black',
+        black: 'text-black ring-black/20 *:text-white',
+        foreground: 'text-foreground ring-foreground/20 *:text-background',
+        background: 'text-background ring-background/20 *:text-foreground',
+        current: 'text-current ring-current/10 *:text-current',
+        error: 'text-error ring-error/20 *:text-white',
+        success: 'text-success ring-success/20 *:text-white',
         custom: '',
       },
       roundedSize: {
@@ -160,31 +155,25 @@ export const buttonVariants = cva(
           'hover:ring-5 focus-visible:ring-5',
           'aria-selected:ring-5',
         ],
+
         input: [
-          // base styles
           'text-foreground',
           'w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl',
           'transition-shadow duration-100 md:text-sm',
-          'ring-0', // base ring
+          'ring-0',
           'disabled:opacity-50',
 
-          'text-foreground',
-          'bg-neutral-50 dark:bg-neutral-950',
-          'ring-neutral-100 dark:ring-neutral-700',
+          'bg-muted',
+          'ring-border',
 
-          // Hover ring (similar spirit to your input)
-          'hover:ring-3', // width
+          'hover:ring-3',
           'aria-selected:ring-4',
-          'focus-visible:ring-3',
+          'focus-visible:ring-3 focus-visible:ring-ring',
           'disabled:ring-0',
 
-          // Focus ring + animation
           'focus-visible:outline-none',
-
-          // Remove any weird box-shadow
           '[box-shadow:none] focus:[box-shadow:none]',
 
-          // aria-invalid border color
           'aria-invalid:border-error',
         ],
       },
@@ -203,7 +192,7 @@ export const buttonVariants = cva(
     defaultVariants: {
       variant: 'default',
       size: 'md',
-      color: 'text',
+      color: 'foreground',
       roundedSize: 'md',
       textAlign: 'center',
       isFullWidth: false,
diff --git a/packages/@intlayer/design-system/src/components/IDE/FileTree.tsx b/packages/@intlayer/design-system/src/components/IDE/FileTree.tsx
index d215df6f11..240af54ade 100644
--- a/packages/@intlayer/design-system/src/components/IDE/FileTree.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/FileTree.tsx
@@ -113,7 +113,7 @@ export const FileTree: FC<FileTreeProps> = ({
   const fileTree = createFileTree(filesPaths);
 
   return (
-    <div className="flex size-full flex-col items-start justify-start py-1 text-neutral">
+    <div className="flex size-full flex-col items-start justify-start py-1 text-muted-foreground">
       {fileTree.map(({ path, subPath, isFile }) => (
         <FileItem
           key={path}
diff --git a/packages/@intlayer/design-system/src/components/IDE/IDE.tsx b/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
index 9d31f7c373..090c855f4a 100644
--- a/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
@@ -58,14 +58,14 @@ export const IDE: FC<IDEProps> = ({
   return (
     <Container
       className={cn(
-        'flex size-full flex-col justify-start overflow-hidden shadow-lg',
+        'flex size-full flex-col justify-start overflow-hidden border',
         className
       )}
-      roundedSize="3xl"
+      roundedSize="lg"
       transparency="none"
       {...props}
     >
-      <div className="flex w-auto flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950">
+      <div className="flex w-auto flex-row items-center justify-start gap-1 border-b bg-card text-muted-foreground text-xs">
         <div className="mx-2 flex items-center justify-start gap-2 p-1">
           <div className="size-3 rounded-full bg-error" />
           <div className="size-3 rounded-full bg-yellow-500" />
@@ -80,10 +80,10 @@ export const IDE: FC<IDEProps> = ({
             return (
               <button
                 className={cn(
-                  'flex h-8 min-w-20 max-w-30 items-center justify-start truncate text-nowrap px-3 py-1 transition',
+                  'flex h-8 min-w-20 max-w-100 items-center justify-start truncate text-nowrap px-3 py-1 transition',
                   isActive
-                    ? 'bg-card'
-                    : 'cursor-pointer bg-neutral-200 hover:bg-neutral-300 dark:bg-neutral-950'
+                    ? 'bg-foreground text-background'
+                    : 'cursor-pointer hover:bg-foreground/50 hover:text-background'
                 )}
                 key={title}
                 onClick={() => setActiveTab(index)}
@@ -108,7 +108,7 @@ export const IDE: FC<IDEProps> = ({
             </WithResizer>
 
             <div className="size-full flex-1 overflow-auto pt-2 text-xs">
-              <MarkdownRenderer>{content}</MarkdownRenderer>
+              {content && <MarkdownRenderer>{content}</MarkdownRenderer>}
             </div>
           </div>
         </div>
diff --git a/packages/@intlayer/design-system/src/components/Pattern/GridDistortionPattern.tsx b/packages/@intlayer/design-system/src/components/Pattern/GridDistortionPattern.tsx
index e07d41be43..f47ba895b9 100644
--- a/packages/@intlayer/design-system/src/components/Pattern/GridDistortionPattern.tsx
+++ b/packages/@intlayer/design-system/src/components/Pattern/GridDistortionPattern.tsx
@@ -44,7 +44,7 @@ const LIGHT_THEME: GridTheme = {
 const DARK_THEME: GridTheme = {
   lineColor: '#4d4d4d',
   highlightColor: '#5c5c5c',
-  baseOpacity: 0.2,
+  baseOpacity: 0.3,
   highlightOpacityBoost: 0.2,
 };
 
diff --git a/packages/@intlayer/design-system/src/components/Pattern/GridPattern.tsx b/packages/@intlayer/design-system/src/components/Pattern/GridPattern.tsx
index 6f868d5324..4599707be7 100644
--- a/packages/@intlayer/design-system/src/components/Pattern/GridPattern.tsx
+++ b/packages/@intlayer/design-system/src/components/Pattern/GridPattern.tsx
@@ -143,7 +143,7 @@ export const GridPattern: FC<GridPatternProps> = ({
   <svg
     aria-hidden="true"
     className={cn(
-      'pointer-events-none absolute inset-0 h-full max-h-full w-full fill-neutral/10 stroke-neutral/15 dark:stroke-neutral/30',
+      'pointer-events-none absolute inset-0 h-full max-h-full w-full fill-border/10 stroke-border/30',
       className
     )}
     {...props}
diff --git a/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx b/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
index f70ea25ebf..e95665958c 100644
--- a/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
+++ b/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
@@ -20,9 +20,10 @@ export type SwitchSelectorColor =
   | 'primary'
   | 'secondary'
   | 'neutral'
-  | 'light'
-  | 'dark'
-  | 'text';
+  | 'white'
+  | 'black'
+  | 'foreground'
+  | 'error';
 
 export type SwitchSelectorSize = 'xs' | 'sm' | 'md' | 'lg';
 
@@ -50,9 +51,10 @@ export const switchSelectorVariant = cva(
         primary: 'border-primary text-primary',
         secondary: 'border-secondary text-secondary',
         neutral: 'border-neutral text-neutral',
-        light: 'border-white text-white',
-        dark: 'border-neutral-800 text-neutral-800',
-        text: 'border-text text-foreground',
+        white: 'border-white text-white',
+        black: 'border-black text-black',
+        foreground: 'border-foreground text-foreground',
+        error: 'border-error text-error',
       },
       disabled: {
         true: 'cursor-not-allowed opacity-50',
@@ -60,14 +62,14 @@ export const switchSelectorVariant = cva(
       },
     },
     defaultVariants: {
-      color: `${'text'}`,
+      color: 'foreground',
       disabled: false,
     },
   }
 );
 
 export const choiceVariant = cva(
-  'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-foreground-opposite motion-reduce:transition-none',
+  'z-1 flex-1 cursor-pointer font-medium text-sm transition-all duration-300 ease-in-out aria-selected:cursor-default data-[indicator=true]:text-background motion-reduce:transition-none',
   {
     variants: {
       size: {
@@ -88,18 +90,18 @@ export const indicatorVariant = cva(
   {
     variants: {
       color: {
-        primary: 'bg-primary data-[indicator=true]:text-foreground',
-        secondary: 'bg-secondary data-[indicator=true]:text-foreground',
-        error: 'bg-error data-[indicator=true]:text-foreground',
+        primary: 'bg-primary data-[indicator=true]:text-primary-foreground',
+        secondary:
+          'bg-secondary data-[indicator=true]:text-secondary-foreground',
         neutral: 'bg-neutral data-[indicator=true]:text-white',
-        light: 'bg-white data-[indicator=true]:text-black',
-        dark: 'bg-neutral-800 data-[indicator=true]:text-white',
-        text: 'bg-text data-[indicator=true]:text-foreground-opposite',
+        white: 'bg-white data-[indicator=true]:text-black',
+        black: 'bg-black data-[indicator=true]:text-white',
+        foreground: 'bg-foreground data-[indicator=true]:text-background',
+        error: 'bg-error data-[indicator=true]:text-white',
       },
     },
   }
 );
-
 /**
  * Component that allows the user to select one of the provided choices.
  * This component is horizontal.
diff --git a/packages/@intlayer/design-system/styles/themes.css b/packages/@intlayer/design-system/styles/themes.css
index bba91b898e..86f30b0949 100644
--- a/packages/@intlayer/design-system/styles/themes.css
+++ b/packages/@intlayer/design-system/styles/themes.css
@@ -20,7 +20,7 @@
   --primary: oklch(94.3% 0.3 326);
   --primary-foreground: oklch(0% 0 0);
 
-  --secondary: oklch(0.92 0.18 95);
+  --secondary: oklch(0.97 0 0);
   --secondary-foreground: oklch(0.205 0 0);
 
   --accent: oklch(0.97 0 0);
@@ -64,8 +64,8 @@
   --primary: oklch(94.3% 0.051 326);
   --primary-foreground: oklch(0% 0 0);
 
-  --secondary: oklch(0.92 0.18 95);
-  --secondary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.205 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
 
   --accent: oklch(0.27 0 0);
   --accent-foreground: oklch(0.985 0 0);

From 4c98afcd4a94c7c66d565359008da9367867f0b2 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Wed, 19 Aug 2026 01:00:45 +0200
Subject: [PATCH 09/32] refactor(website): add main landing switcher

---
 .../src/components/LandingSwitcher.tsx        | 98 +++++++++++++++++++
 .../LocaleSwitcher/LocaleSwitcher.tsx         |  2 +-
 apps/website/src/routes/{-$locale}/index.tsx  |  6 +-
 3 files changed, 102 insertions(+), 4 deletions(-)
 create mode 100644 apps/website/src/components/LandingSwitcher.tsx

diff --git a/apps/website/src/components/LandingSwitcher.tsx b/apps/website/src/components/LandingSwitcher.tsx
new file mode 100644
index 0000000000..9e8b4c93e4
--- /dev/null
+++ b/apps/website/src/components/LandingSwitcher.tsx
@@ -0,0 +1,98 @@
+import { Button } from '@intlayer/design-system/button';
+import { Container } from '@intlayer/design-system/container';
+import { DropDown } from '@intlayer/design-system/drop-down';
+import { MoveVertical } from 'lucide-react';
+import { type FC, lazy, Suspense, useState } from 'react';
+import { LandingPage } from './LandingPage';
+
+const DROPDOWN_IDENTIFIER = 'landing-switcher';
+
+const CMSLandingPage = lazy(() =>
+  import('./CMSLandingPage').then((module) => ({
+    default: module.CMSLandingPage,
+  }))
+);
+const TMSLandingPage = lazy(() =>
+  import('./TMSLandingPage').then((module) => ({
+    default: module.TMSLandingPage,
+  }))
+);
+
+export const LandingPageWithSwitcher: FC = () => {
+  const Landings = {
+    int: { Component: LandingPage, content: 'Internationalization Packages' },
+    cms: { Component: CMSLandingPage, content: 'Content Management System' },
+    tms: {
+      Component: TMSLandingPage,
+      content: 'Translations Management System',
+    },
+  } as const;
+
+  const [landing, set_landing] = useState<keyof typeof Landings>('int');
+  const Landing = Landings[landing];
+
+  return (
+    <>
+      <div className="absolute right-0 p-4">
+        <DropDown identifier={DROPDOWN_IDENTIFIER}>
+          <DropDown.Trigger
+            identifier={DROPDOWN_IDENTIFIER}
+            aria-label="Select landing page"
+            size="lg"
+            className="z-50 p-0!"
+            variant="outline"
+            color="foreground"
+            roundedSize="sm"
+          >
+            <div className="flex w-full items-center justify-between">
+              <div className="text-nowrap px-2 text-sm">{Landing.content}</div>
+              <MoveVertical className="w-5 self-center" />
+            </div>
+          </DropDown.Trigger>
+
+          <DropDown.Panel
+            identifier={DROPDOWN_IDENTIFIER}
+            isOverable
+            isFocusable
+            align="end"
+          >
+            <Container
+              className="max-h-[80vh] min-w-28 border border-text/5"
+              separator="y"
+              roundedSize="xl"
+              transparency="xs"
+            >
+              <ul
+                className="divide-y divide-dashed divide-text/20 overflow-y-auto p-1"
+                aria-label="Landing pages"
+              >
+                {Object.entries(Landings)
+                  .filter((x) => landing !== x[0])
+                  .map(([key, Landing]) => (
+                    <li className="py-1 pr-3" key={key}>
+                      <Button
+                        variant="invisible-link"
+                        className="w-full"
+                        label={Landing.content}
+                        onClick={() =>
+                          set_landing(key as keyof typeof Landings)
+                        }
+                      >
+                        <div className="flex flex-row items-center justify-between gap-3 px-2 py-1">
+                          <span>{Landing.content}</span>
+                        </div>
+                      </Button>
+                    </li>
+                  ))}
+              </ul>
+            </Container>
+          </DropDown.Panel>
+        </DropDown>
+      </div>
+
+      <Suspense fallback="Loading">
+        <Landing.Component />
+      </Suspense>
+    </>
+  );
+};
diff --git a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
index 4ab904fe7d..fef8946286 100644
--- a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
+++ b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
@@ -61,7 +61,7 @@ export const LocaleSwitcher: FC<LocaleSwitcherProps> = ({
           size="sm"
           className="p-0!"
           variant="outline"
-          color="text"
+          color="foreground"
           roundedSize="5xl"
           onClick={handleFocusInput}
         >
diff --git a/apps/website/src/routes/{-$locale}/index.tsx b/apps/website/src/routes/{-$locale}/index.tsx
index 193a1f7f60..fe177f8c9b 100644
--- a/apps/website/src/routes/{-$locale}/index.tsx
+++ b/apps/website/src/routes/{-$locale}/index.tsx
@@ -2,7 +2,7 @@ import { Website_Home } from '@intlayer/design-system/routes';
 import { buildProductJsonLd } from '@intlayer/design-system/structured-data';
 import { createFileRoute } from '@tanstack/react-router';
 import { defaultLocale, getIntlayerAsync } from 'intlayer';
-import { LandingPage as LandingPageContent } from '~/components/LandingPage';
+import { LandingPageWithSwitcher } from '~/components/LandingSwitcher';
 import { PageLayout } from '~/layouts/PageLayout';
 import { getAbsoluteUrl, getHreflangLinks } from '~/utils/seo';
 import { formatStructuredDataOffers, getPricing } from '~/utils/stripe';
@@ -100,8 +100,8 @@ export const Route = createFileRoute('/{-$locale}/')({
 
 function LandingPage() {
   return (
-    <PageLayout mainClassName="max-w-[1300px] mx-auto border-x ">
-      <LandingPageContent />
+    <PageLayout mainClassName="max-w-[1300px] mx-auto border-x relative">
+      <LandingPageWithSwitcher />
     </PageLayout>
   );
 }

From 438c33a43af072688269881aa5ca4b00d9cfcbc0 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Thu, 20 Aug 2026 14:01:08 +0200
Subject: [PATCH 10/32] refactor(website): remake faq component

---
 .../CommonQuestions.tsx                       | 82 ++++++++++++++++++-
 1 file changed, 79 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
index b58413cfd7..25c9bc15e4 100644
--- a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
+++ b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
@@ -1,9 +1,8 @@
-import { Container } from '@intlayer/design-system/container';
 import { MaxHeightSmoother } from '@intlayer/design-system/max-height-smoother';
 import { Website_FrequentQuestions_Path } from '@intlayer/design-system/routes';
 import { cn } from '@intlayer/design-system/utils';
-import { ArrowRight } from 'lucide-react';
-import { type FC, useMemo, useSyncExternalStore } from 'react';
+import { ArrowRight, ChevronDown } from 'lucide-react';
+import { type FC, useMemo, useState, useSyncExternalStore } from 'react';
 import { type IntlayerNode, useIntlayer } from 'react-intlayer';
 import { Link } from '~/components/Link/Link';
 
@@ -108,10 +107,87 @@ const useResponsiveColumns = (): number => {
   );
 };
 
+const FAQItem: FC<{
+  question: IntlayerNode;
+  answer: IntlayerNode;
+  callToAction?: { label: IntlayerNode; url: IntlayerNode };
+}> = ({ question, answer, callToAction }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={() => setOpen((x) => !x)}
+      data-open={open}
+      className="group flex w-full cursor-pointer flex-col px-3 py-1 data-[open=true]:py-3"
+    >
+      <div className="flex w-full items-center justify-between gap-3">
+        {question}
+
+        <ChevronDown
+          data-open={open}
+          className="size-5 origin-center text-muted-foreground transition-transform duration-200 data-[open=true]:rotate-180"
+        />
+      </div>
+
+      <div
+        data-open={open}
+        className={`grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-300 ease-out data-[open=true]:grid-rows-[1fr] data-[open=true]:opacity-100`}
+      >
+        <div className="overflow-hidden">
+          <p className="pt-2 text-left text-[15px] text-muted-foreground leading-5">
+            {answer}
+            {callToAction && (
+              <Link
+                to={callToAction.url.value}
+                label={callToAction.label.value}
+                color="text"
+                className="text-sm"
+              >
+                {callToAction.label}
+              </Link>
+            )}
+          </p>
+        </div>
+      </div>
+    </button>
+  );
+};
+
 export const CommonQuestionsSection: FC = () => {
   const { content, title, allFrequentQuestionLink } =
     useIntlayer('common-questions');
 
+  return (
+    <section className="flex w-full flex-col items-center justify-center gap-8 p-16">
+      <h2 className="text-3xl">{title}</h2>
+
+      <div className="my-3 flex w-full max-w-2xl flex-col items-start justify-center gap-x-6 rounded-xl border [&>button:not(:first-child)]:border-t">
+        {content.map((data) => (
+          <FAQItem key={data.question} {...data} />
+        ))}
+      </div>
+
+      <Link
+        to={Website_FrequentQuestions_Path}
+        label={allFrequentQuestionLink.label.value}
+        color="text"
+        variant="button"
+        roundedSize="full"
+        className="flex w-auto"
+      >
+        <span className="flex items-center gap-2">
+          {allFrequentQuestionLink.text}
+          <ArrowRight className="size-4" />
+        </span>
+      </Link>
+    </section>
+  );
+};
+
+export const CommonQuestionsSectionOld: FC = () => {
+  const { content, title, allFrequentQuestionLink } =
+    useIntlayer('common-questions');
+
   // Determine the number of columns based on the current breakpoint.
   const numberOfColumns = useResponsiveColumns();
 

From c8d00890169dbf85a94e9eb64731b31c978b41a1 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Thu, 20 Aug 2026 21:23:50 +0200
Subject: [PATCH 11/32] fix(website): structured data and layout tweaks

---
 .../CommonQuestions.tsx                       | 27 ++++++++++++++-----
 .../LandingPage/ProductsSection/index.tsx     |  2 +-
 .../WhyToChoseIntlayerSection/index.tsx       |  2 +-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
index 25c9bc15e4..e03ac85a5a 100644
--- a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
+++ b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
@@ -4,6 +4,7 @@ import { cn } from '@intlayer/design-system/utils';
 import { ArrowRight, ChevronDown } from 'lucide-react';
 import { type FC, useMemo, useState, useSyncExternalStore } from 'react';
 import { type IntlayerNode, useIntlayer } from 'react-intlayer';
+import { BackgroundLayout } from '~/components/BackgroundLayout';
 import { Link } from '~/components/Link/Link';
 
 const QuestionItem: FC<{
@@ -118,10 +119,10 @@ const FAQItem: FC<{
       type="button"
       onClick={() => setOpen((x) => !x)}
       data-open={open}
-      className="group flex w-full cursor-pointer flex-col px-3 py-1 data-[open=true]:py-3"
+      className="group flex w-full cursor-pointer flex-col px-3 py-1 hover:bg-accent data-[open=true]:py-3"
     >
       <div className="flex w-full items-center justify-between gap-3">
-        {question}
+        <p itemProp="name">{question}</p>
 
         <ChevronDown
           data-open={open}
@@ -133,8 +134,16 @@ const FAQItem: FC<{
         data-open={open}
         className={`grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-300 ease-out data-[open=true]:grid-rows-[1fr] data-[open=true]:opacity-100`}
       >
-        <div className="overflow-hidden">
-          <p className="pt-2 text-left text-[15px] text-muted-foreground leading-5">
+        <div
+          itemProp="acceptedAnswer"
+          itemScope
+          itemType="https://schema.org/Answer"
+          className="overflow-hidden"
+        >
+          <p
+            itemProp="text"
+            className="pt-2 text-left text-[15px] text-muted-foreground leading-5"
+          >
             {answer}
             {callToAction && (
               <Link
@@ -158,10 +167,16 @@ export const CommonQuestionsSection: FC = () => {
     useIntlayer('common-questions');
 
   return (
-    <section className="flex w-full flex-col items-center justify-center gap-8 p-16">
+    <section className="relative flex w-full flex-col items-center justify-center gap-8 p-16">
+      <BackgroundLayout />
+
       <h2 className="text-3xl">{title}</h2>
 
-      <div className="my-3 flex w-full max-w-2xl flex-col items-start justify-center gap-x-6 rounded-xl border [&>button:not(:first-child)]:border-t">
+      <div
+        itemScope
+        itemType="https://schema.org/FAQPage"
+        className="my-3 flex w-full max-w-2xl flex-col items-start justify-center gap-x-6 overflow-hidden rounded-xl border bg-background [&>button:not(:first-child)]:border-t"
+      >
         {content.map((data) => (
           <FAQItem key={data.question} {...data} />
         ))}
diff --git a/apps/website/src/components/LandingPage/ProductsSection/index.tsx b/apps/website/src/components/LandingPage/ProductsSection/index.tsx
index 636b2e74cd..78618ef75d 100644
--- a/apps/website/src/components/LandingPage/ProductsSection/index.tsx
+++ b/apps/website/src/components/LandingPage/ProductsSection/index.tsx
@@ -48,7 +48,7 @@ export const ProductsSection: FC = () => {
       ref={sectionRef}
       className="flex min-h-[75vh] w-full items-center justify-center overflow-hidden border-b"
     >
-      <Carousel initialIndex={1} className="space-y-10">
+      <Carousel initialIndex={1} className="space-y-10 overflow-visible">
         {PRODUCTS.map(({ Component, key }) => (
           <Carousel.Item key={key}>
             <div className="max-w-2xl rounded-2xl border bg-card p-6">
diff --git a/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx b/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
index 0517e282e0..56dfcc7bba 100644
--- a/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
+++ b/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
@@ -26,7 +26,7 @@ export const WhyToChoseIntlayerSection: FC = () => {
 
           return (
             <AnimatedDiv
-              className="flex max-w-45 flex-col items-center gap-3 self-start p-6 text-center md:max-w-100"
+              className="flex max-w-45 flex-col items-center gap-5 self-start p-6 text-center md:max-w-100"
               key={asset.title.value}
             >
               <div className="flex w-full flex-col items-center gap-4 md:flex-row">

From 7a37e16b019690430301fe732061bec5b2a37253 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Sun, 23 Aug 2026 23:02:09 +0200
Subject: [PATCH 12/32] refactor(website): migrate features section to bento
 grid

---
 .../NEW/CompilerSection/Visual.tsx            |  63 +++++++
 .../content/component-angular.md              |  18 ++
 .../content/component-content.md              |  15 ++
 .../CompilerSection/content/component-lit.md  |  20 ++
 .../content/component-preact.md               |  14 ++
 .../content/component-react.md                |  14 ++
 .../content/component-solid.md                |  14 ++
 .../content/component-svelte.md               |  10 +
 .../content/component-vanilla.md              |  10 +
 .../CompilerSection/content/component-vue.md  |  12 ++
 .../CompilerSection/content/config-file.md    |  18 ++
 .../CompilerSection/content/vite-config.md    |   9 +
 .../NEW/CompilerSection/demo.content.ts       |  94 ++++++++++
 .../LandingPage/NEW/CompilerSection/index.tsx | 125 +++++++++++++
 .../LandingPage/NEW/FrameworkContext.tsx      |  57 ++++++
 .../LandingPage/NEW/FrameworkSelector.tsx     |  57 ++++++
 .../content/client-component-i18n-en.md       |   8 +
 .../content/client-component-i18n-es.md       |   8 +
 .../content/client-component-i18n-fr.md       |   8 +
 .../IDESection/content/client-component.md    |  20 ++
 .../NEW/IDESection/content/client-content.md  |  18 ++
 .../IDESection/content/component-angular.md   |  18 ++
 .../NEW/IDESection/content/component-lit.md   |  20 ++
 .../content/component-next-client.md          |  18 ++
 .../content/component-next-server.md          |  15 ++
 .../IDESection/content/component-preact.md    |  15 ++
 .../NEW/IDESection/content/component-react.md |  15 ++
 .../NEW/IDESection/content/component-solid.md |  15 ++
 .../IDESection/content/component-svelte.md    |  12 ++
 .../IDESection/content/component-vanilla.md   |   9 +
 .../NEW/IDESection/content/component-vue.md   |  15 ++
 .../content/config-file-centralized.md        |  14 ++
 .../content/config-file-per-component.md      |  19 ++
 .../content/server-component-i18n-en.md       |   8 +
 .../content/server-component-i18n-es.md       |   8 +
 .../content/server-component-i18n-fr.md       |   8 +
 .../IDESection/content/server-component.md    |  20 ++
 .../NEW/IDESection/content/server-content.md  |  16 ++
 .../LandingPage/NEW/IDESection/index.tsx      | 175 ++++++++++++++++++
 .../LandingPage/NEW/ModeSelector.tsx          |  22 +++
 .../LandingPage/NEW/RedesignedFeatures.tsx    |  47 +++++
 .../src/components/LandingPage/index.tsx      |  10 +-
 .../design-system/src/components/IDE/IDE.tsx  |   8 +-
 .../LanguageBackground/LanguageSection.tsx    |   4 +-
 44 files changed, 1111 insertions(+), 12 deletions(-)
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/Visual.tsx
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-angular.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-content.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-lit.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-preact.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-react.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-solid.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-svelte.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vanilla.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vue.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/config-file.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/content/vite-config.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/demo.content.ts
 create mode 100644 apps/website/src/components/LandingPage/NEW/CompilerSection/index.tsx
 create mode 100644 apps/website/src/components/LandingPage/NEW/FrameworkContext.tsx
 create mode 100644 apps/website/src/components/LandingPage/NEW/FrameworkSelector.tsx
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-en.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-es.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-fr.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/client-component.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/client-content.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-angular.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-lit.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-client.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-server.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-preact.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-react.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-solid.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-svelte.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-vanilla.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/component-vue.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-centralized.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-per-component.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-en.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-es.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-fr.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/server-component.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/content/server-content.md
 create mode 100644 apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
 create mode 100644 apps/website/src/components/LandingPage/NEW/ModeSelector.tsx
 create mode 100644 apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx

diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/Visual.tsx b/apps/website/src/components/LandingPage/NEW/CompilerSection/Visual.tsx
new file mode 100644
index 0000000000..2fda34a2ed
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/Visual.tsx
@@ -0,0 +1,63 @@
+import { H3 } from '@intlayer/design-system/headers';
+import { Select } from '@intlayer/design-system/select';
+import { getLocaleName, Locales } from 'intlayer';
+import { type FC, useEffect, useState } from 'react';
+import { useIntlayer, useLocale } from 'react-intlayer';
+
+export const VisualEditorSection: FC = () => {
+  const { availableLocales } = useLocale();
+  const [isControlled, setIsControlled] = useState(false);
+  const [manualLocale, setManualLocale] = useState<string>(Locales.ENGLISH);
+
+  const [locale, setLocale] = useState<string>(Locales.ENGLISH);
+
+  useEffect(() => {
+    if (isControlled || !availableLocales.length) return;
+
+    const interval = setInterval(() => {
+      const randomLocale =
+        availableLocales[Math.floor(Math.random() * availableLocales.length)];
+
+      setLocale(randomLocale);
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, [isControlled, availableLocales]);
+
+  /*   if (isControlled) {
+    locale = manualLocale;
+  }
+  */
+  const { title, paragraph, selectPlaceholder, localeSelectorTrigger } =
+    useIntlayer('compiler-section', locale);
+
+  return (
+    <div className="relative z-0 flex size-full flex-col justify-center gap-10 overflow-hidden rounded-r-lg border bg-background p-6 text-center">
+      <H3>{title}</H3>
+      <p className="text-muted-foreground text-sm">{paragraph}</p>
+      <div className="absolute right-6 bottom-6">
+        <Select
+          value={locale}
+          onValueChange={(value) => {
+            setIsControlled(true);
+            setManualLocale(value);
+          }}
+        >
+          <Select.Trigger
+            className="ml-auto py-1 text-sm"
+            aria-label={localeSelectorTrigger.value}
+          >
+            <Select.Value placeholder={selectPlaceholder.value} />
+          </Select.Trigger>
+          <Select.Content>
+            {availableLocales.map((locale) => (
+              <Select.Item key={locale} value={locale}>
+                {getLocaleName(locale)}
+              </Select.Item>
+            ))}
+          </Select.Content>
+        </Select>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-angular.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-angular.md
new file mode 100644
index 0000000000..5a6f798df4
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-angular.md
@@ -0,0 +1,18 @@
+```ts
+// src/app/component.component.ts
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app-component",
+  template: `
+    <div>
+      <h2>Intlayer Compiler</h2>
+      <p>
+        The Intlayer Compiler extracts automatically the content from the
+        components and generates the dictionary files.
+      </p>
+    </div>
+  `,
+})
+export class MyComponent {}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-content.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-content.md
new file mode 100644
index 0000000000..855cf293f0
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-content.md
@@ -0,0 +1,15 @@
+```tsx
+// src/components/Component.tsx
+
+export const Component = () => {
+  return (
+    <div>
+      <h2>Intlayer Compiler</h2>
+      <p>
+        The Intlayer Compiler extract automatically the content from the
+        components and generate the dictionary files.
+      </p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-lit.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-lit.md
new file mode 100644
index 0000000000..052ceac934
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-lit.md
@@ -0,0 +1,20 @@
+```ts
+// src/components/Component.ts
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("my-component")
+export class MyComponent extends LitElement {
+  render() {
+    return html`
+      <div>
+        <h2>Intlayer Compiler</h2>
+        <p>
+          The Intlayer Compiler extracts automatically the content from the
+          components and generates the dictionary files.
+        </p>
+      </div>
+    `;
+  }
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-preact.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-preact.md
new file mode 100644
index 0000000000..157b2b7539
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-preact.md
@@ -0,0 +1,14 @@
+```tsx
+// src/components/Component.tsx
+export const Component = () => {
+  return (
+    <div>
+      <h2>Intlayer Compiler</h2>
+      <p>
+        The Intlayer Compiler extracts automatically the content from the
+        components and generates the dictionary files.
+      </p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-react.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-react.md
new file mode 100644
index 0000000000..157b2b7539
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-react.md
@@ -0,0 +1,14 @@
+```tsx
+// src/components/Component.tsx
+export const Component = () => {
+  return (
+    <div>
+      <h2>Intlayer Compiler</h2>
+      <p>
+        The Intlayer Compiler extracts automatically the content from the
+        components and generates the dictionary files.
+      </p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-solid.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-solid.md
new file mode 100644
index 0000000000..157b2b7539
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-solid.md
@@ -0,0 +1,14 @@
+```tsx
+// src/components/Component.tsx
+export const Component = () => {
+  return (
+    <div>
+      <h2>Intlayer Compiler</h2>
+      <p>
+        The Intlayer Compiler extracts automatically the content from the
+        components and generates the dictionary files.
+      </p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-svelte.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-svelte.md
new file mode 100644
index 0000000000..eda3725372
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-svelte.md
@@ -0,0 +1,10 @@
+```svelte
+<!-- src/components/Component.svelte -->
+<div>
+  <h2>Intlayer Compiler</h2>
+  <p>
+    The Intlayer Compiler extracts automatically the content from
+    the components and generates the dictionary files.
+  </p>
+</div>
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vanilla.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vanilla.md
new file mode 100644
index 0000000000..9a285cf5a8
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vanilla.md
@@ -0,0 +1,10 @@
+```html
+<!-- src/components/component.html -->
+<div>
+  <h2>Intlayer Compiler</h2>
+  <p>
+    The Intlayer Compiler extracts automatically the content from the components
+    and generates the dictionary files.
+  </p>
+</div>
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vue.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vue.md
new file mode 100644
index 0000000000..152ae0b460
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vue.md
@@ -0,0 +1,12 @@
+```vue
+<!-- src/components/Component.vue -->
+<template>
+  <div>
+    <h2>Intlayer Compiler</h2>
+    <p>
+      The Intlayer Compiler extracts automatically the content from the
+      components and generates the dictionary files.
+    </p>
+  </div>
+</template>
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/config-file.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/config-file.md
new file mode 100644
index 0000000000..c5cc34622f
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/config-file.md
@@ -0,0 +1,18 @@
+```tsx
+// intlayer.config.ts
+
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  compiler: {
+    enabled: true,
+    output: ({ fileName }) => `./${fileName}.content.ts`,
+  },
+};
+
+export default config;
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/vite-config.md b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/vite-config.md
new file mode 100644
index 0000000000..3250d4ab2e
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/content/vite-config.md
@@ -0,0 +1,9 @@
+```tsx
+// vite.config.ts
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [intlayer(), intlayerCompiler()],
+});
+```
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/demo.content.ts b/apps/website/src/components/LandingPage/NEW/CompilerSection/demo.content.ts
new file mode 100644
index 0000000000..8f86ae289d
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/demo.content.ts
@@ -0,0 +1,94 @@
+import { type Dictionary, t } from 'intlayer';
+
+const demoContent = {
+  key: 'compiler-section',
+  content: {
+    title: t({
+      en: 'Intlayer compiler',
+      fr: 'Compilateur Intlayer',
+      es: 'Compilador Intlayer',
+      'en-GB': 'Intlayer compiler',
+      de: 'Intlayer-Compiler',
+      ja: 'Intlayerコンパイラ',
+      ko: 'Intlayer 컴파일러',
+      zh: 'Intlayer 编译器',
+      it: 'Compilatore Intlayer',
+      pt: 'Compilador Intlayer',
+      hi: 'Intlayer कम्पाइलर',
+      ar: 'مُصرّف Intlayer',
+      ru: 'Компилятор Intlayer',
+      tr: 'Intlayer derleyici',
+      pl: 'Kompilator Intlayer',
+      id: 'Kompiler Intlayer',
+      vi: 'Trình biên dịch Intlayer',
+      uk: 'Компілятор Intlayer',
+    }),
+    paragraph: t({
+      en: 'The Intlayer Compiler automatically extracts the content from the components and generates the dictionary files.',
+      fr: 'Le Compilateur Intlayer extrait automatiquement le contenu des composants et génère les fichiers de dictionnaire.',
+      es: 'El Compilador Intlayer extrae automáticamente el contenido de los componentes y genera los archivos de diccionario.',
+      'en-GB':
+        'The Intlayer Compiler automatically extracts the content from the components and generates the dictionary files.',
+      de: 'Der Intlayer Compiler extrahiert automatisch den Inhalt aus den Komponenten und generiert die Wörterbuchdateien.',
+      ja: 'Intlayerコンパイラは、コンポーネントからコンテンツを自動的に抽出し、辞書ファイルを生成します。',
+      ko: 'Intlayer 컴파일러는 컴포넌트에서 콘텐츠를 자동으로 추출하여 사전 파일을 생성합니다.',
+      zh: 'Intlayer编译器自动提取组件中的内容并生成字典文件。',
+      it: 'Il Compilatore Intlayer estrae automaticamente il contenuto dai componenti e genera i file del dizionario.',
+      pt: 'O Compilador Intlayer extrai automaticamente o conteúdo dos componentes e gera os arquivos de dicionário.',
+      hi: 'Intlayer Compiler स्वचालित रूप से कंपोनेंट्स की सामग्री को निकालता है और शब्दकोश फ़ाइलें तैयार करता है।',
+      ar: 'يقوم مترجم Intlayer باستخراج المحتوى من المكونات تلقائيًا وإنشاء ملفات القاموس.',
+      ru: 'Компилятор Intlayer автоматически извлекает содержимое из компонентов и генерирует файлы словаря.',
+      tr: 'Intlayer Derleyicisi, bileşenlerden içeriği otomatik olarak çıkarır ve sözlük dosyalarını oluşturur.',
+      pl: 'Kompilator Intlayer automatycznie wyodrębnia zawartość z komponentów i generuje pliki słownika.',
+      id: 'Intlayer Compiler secara otomatis mengekstrak konten dari komponen dan menghasilkan file kamus.',
+      vi: 'Trình biên dịch Intlayer tự động trích xuất nội dung từ các thành phần và tạo các tệp từ điển.',
+      uk: 'Компілятор Intlayer автоматично витягує вміст із компонентів і генерує файли словників.',
+    }),
+    localeSelectorTrigger: t({
+      en: 'Click to select a locale',
+      fr: 'Cliquer pour sélectionner une locale',
+      es: 'Elegir el idioma local',
+      'en-GB': 'Click to select a locale',
+      de: 'Klicken Sie, um eine Sprache auszuwählen',
+      ja: '言語を選択するにはクリックしてください',
+      ko: '언어를 선택하려면 클릭하세요',
+      zh: '点击选择语言',
+      it: 'Clicca per selezionare una lingua',
+      pt: 'Clique para selecionar um idioma',
+      hi: 'भाषा चुनने के लिए क्लिक करें',
+      ar: 'انقر لاختيار اللغة',
+      ru: 'Нажмите, чтобы выбрать язык',
+      tr: 'Bir dil seçmek için tıklayın',
+      pl: 'Kliknij, aby wybrać język',
+      id: 'Klik untuk memilih bahasa',
+      vi: 'Nhấn để chọn ngôn ngữ',
+      uk: 'Натисніть, щоб вибрати локаль',
+    }),
+    selectPlaceholder: t({
+      en: 'Choose locale...',
+      fr: 'Choisir la locale...',
+      es: 'Elegir la locale...',
+      'en-GB': 'Choose locale...',
+      de: 'Sprache auswählen...',
+      ja: '言語を選択...',
+      ko: '언어 선택...',
+      zh: '选择语言...',
+      it: 'Seleziona la lingua...',
+      pt: 'Selecionar idioma...',
+      hi: 'भाषा चुनें...',
+      ar: 'اختر اللغة...',
+      ru: 'Выберите язык...',
+      tr: 'Dil seçin...',
+      pl: 'Wybierz język...',
+      id: 'Pilih bahasa...',
+      vi: 'Chọn ngôn ngữ...',
+      uk: 'Виберіть локаль...',
+    }),
+  },
+  title: 'Intlayer Compiler section',
+  description:
+    'Section describing the Intlayer Compiler that automatically extracts content from components and generates dictionary files. Includes UI strings such as locale selector and placeholders.',
+  tags: ['compiler', 'localization', 'content-extraction'],
+} as const satisfies Dictionary;
+
+export default demoContent;
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/index.tsx b/apps/website/src/components/LandingPage/NEW/CompilerSection/index.tsx
new file mode 100644
index 0000000000..8b53a901d8
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/CompilerSection/index.tsx
@@ -0,0 +1,125 @@
+import { IDE } from '@intlayer/design-system/ide';
+import { WithResizer } from '@intlayer/design-system/with-resizer';
+import { useTheme } from 'next-themes';
+import type { FC } from 'react';
+import { type Framework, useFramework } from '../FrameworkContext';
+import { FrameworkSelector } from '../FrameworkSelector';
+import componentAngular from './content/component-angular.md';
+import componentLit from './content/component-lit.md';
+import componentPreact from './content/component-preact.md';
+import componentReact from './content/component-react.md';
+import componentSolid from './content/component-solid.md';
+import componentSvelte from './content/component-svelte.md';
+import componentVanilla from './content/component-vanilla.md';
+import componentVue from './content/component-vue.md';
+import configFile from './content/config-file.md';
+import viteConfigFile from './content/vite-config.md';
+import { VisualEditorSection } from './Visual';
+
+const frameworkTabs: Record<
+  Framework,
+  { path: string; content: string; isOpen: boolean }[]
+> = {
+  next: [
+    {
+      path: 'src/components/Component.tsx',
+      content: componentReact,
+      isOpen: true,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+  react: [
+    {
+      path: 'src/components/Component.tsx',
+      content: componentReact,
+      isOpen: true,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+  vue: [
+    {
+      path: 'src/components/Component.vue',
+      content: componentVue,
+      isOpen: false,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+  svelte: [
+    {
+      path: 'src/components/Component.svelte',
+      content: componentSvelte,
+      isOpen: true,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+  lit: [
+    {
+      path: 'src/components/Component.ts',
+      content: componentLit,
+      isOpen: true,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+  angular: [
+    {
+      path: 'src/app/component.component.ts',
+      content: componentAngular,
+      isOpen: true,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+  preact: [
+    {
+      path: 'src/components/Component.tsx',
+      content: componentPreact,
+      isOpen: true,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+  solid: [
+    {
+      path: 'src/components/Component.tsx',
+      content: componentSolid,
+      isOpen: true,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+  vanilla: [
+    {
+      path: 'src/components/component.html',
+      content: componentVanilla,
+      isOpen: true,
+    },
+    { path: 'intlayer.config.ts', content: configFile, isOpen: false },
+    { path: 'vite.config.ts', content: viteConfigFile, isOpen: false },
+  ],
+};
+
+export const CompilerSection: FC = () => {
+  const { resolvedTheme } = useTheme();
+  const { framework } = useFramework();
+
+  const tabs = frameworkTabs[framework];
+
+  return (
+    <div className="flex size-full min-h-90 flex-1 flex-row rounded-3xl bg-neutral-200 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-4xl dark:bg-neutral-950">
+      <IDE
+        isDarkMode={resolvedTheme === 'dark'}
+        pages={tabs}
+        className="mx-auto flex-1 rounded-r-none! border-r-none! text-xs"
+        key={framework}
+      />
+      <WithResizer initialWidth={300} handlePosition="left">
+        <VisualEditorSection />
+      </WithResizer>
+    </div>
+  );
+};
diff --git a/apps/website/src/components/LandingPage/NEW/FrameworkContext.tsx b/apps/website/src/components/LandingPage/NEW/FrameworkContext.tsx
new file mode 100644
index 0000000000..e288f2da4e
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/FrameworkContext.tsx
@@ -0,0 +1,57 @@
+import { usePersistedStore } from '@intlayer/design-system/hooks';
+import {
+  createContext,
+  type FC,
+  type PropsWithChildren,
+  useContext,
+} from 'react';
+
+export type Framework =
+  | 'next'
+  | 'react'
+  | 'vue'
+  | 'svelte'
+  | 'lit'
+  | 'angular'
+  | 'preact'
+  | 'solid'
+  | 'vanilla';
+
+export type Mode = 'centralized' | 'per-component';
+
+type FrameworkContextValue = {
+  framework: Framework;
+  setFramework: (framework: Framework) => void;
+  mode: Mode;
+  setMode: (framework: Mode) => void;
+};
+
+const FrameworkContext = createContext<FrameworkContextValue | null>(null);
+
+export const FrameworkProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [framework, setFramework] = usePersistedStore<Framework>(
+    'landing-framework',
+    'next'
+  );
+  const [mode, setMode] = usePersistedStore<Mode>(
+    'landing-mode',
+    'centralized'
+  );
+
+  return (
+    <FrameworkContext.Provider
+      value={{ framework, setFramework, mode, setMode }}
+    >
+      {children}
+    </FrameworkContext.Provider>
+  );
+};
+
+export function useFramework() {
+  const context = useContext(FrameworkContext);
+  if (!context)
+    throw new Error(
+      'useFrameworkContext must be used within FrameworkProvider'
+    );
+  return context;
+}
diff --git a/apps/website/src/components/LandingPage/NEW/FrameworkSelector.tsx b/apps/website/src/components/LandingPage/NEW/FrameworkSelector.tsx
new file mode 100644
index 0000000000..ee2d1e4f59
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/FrameworkSelector.tsx
@@ -0,0 +1,57 @@
+import { SwitchSelector } from '@intlayer/design-system/switch-selector';
+import { TechLogo, type TechLogoName } from '@intlayer/design-system/tech-logo';
+import { cn } from '@intlayer/design-system/utils';
+import { type Framework, useFramework } from './FrameworkContext';
+
+type FrameworkChoice = {
+  content: React.ReactNode;
+  value: Framework;
+};
+
+type FrameworkSelectorProps = {
+  frameworks?: Framework[];
+};
+
+const allFrameworks: { value: Framework; logo: TechLogoName }[] = [
+  { value: 'next', logo: 'nextjs' },
+  { value: 'react', logo: 'react' },
+  { value: 'vue', logo: 'vue' },
+  { value: 'svelte', logo: 'svelte' },
+  { value: 'lit', logo: 'lit' },
+  { value: 'angular', logo: 'angular' },
+  { value: 'preact', logo: 'preact' },
+  { value: 'solid', logo: 'solid' },
+  { value: 'vanilla', logo: 'vanilla' },
+];
+
+export const FrameworkSelector = ({ frameworks }: FrameworkSelectorProps) => {
+  const { framework, setFramework } = useFramework();
+
+  const filtered = frameworks
+    ? allFrameworks.filter((f) => frameworks.includes(f.value))
+    : allFrameworks;
+
+  const choices: FrameworkChoice[] = filtered.map(({ value, logo }) => ({
+    value,
+    content: (
+      <TechLogo
+        name={logo}
+        className={cn(
+          'size-4',
+          value === 'next' && 'text-foreground',
+          framework !== value && 'opacity-50'
+        )}
+      />
+    ),
+  }));
+
+  return (
+    <SwitchSelector
+      choices={choices}
+      value={framework}
+      onChange={setFramework}
+      size="sm"
+      color="secondary"
+    />
+  );
+};
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-en.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-en.md
new file mode 100644
index 0000000000..c9b13ed054
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-en.md
@@ -0,0 +1,8 @@
+```json
+// i18n/en/client-component.json
+
+{
+  "title": "Title of my component",
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-es.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-es.md
new file mode 100644
index 0000000000..daeedd1cf7
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-es.md
@@ -0,0 +1,8 @@
+```json
+// i18n/es/client-component.json
+
+{
+  "title": "Título de mi componente",
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-fr.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-fr.md
new file mode 100644
index 0000000000..cf69044516
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-fr.md
@@ -0,0 +1,8 @@
+```json
+// i18n/fr/client-component.json
+
+{
+  "title": "Titre de mon composant",
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component.md
new file mode 100644
index 0000000000..e0b0beec2d
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component.md
@@ -0,0 +1,20 @@
+```tsx
+// src/component/client/component.content.ts
+
+import { t, type Dictionary } from "intlayer";
+
+const clientComponentContent = {
+  key: "client-component",
+  content: {
+    title: t({
+      en: "Title of my component",
+      fr: "Titre de mon component",
+      es: "Título de mi componente",
+    }),
+    content:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+} satisfies Dictionary;
+
+export default clientComponentContent;
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-content.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-content.md
new file mode 100644
index 0000000000..8bf392d223
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/client-content.md
@@ -0,0 +1,18 @@
+```tsx
+// src/component/client/Component.tsx
+
+"use client";
+
+import { useIntlayer } from "react-intlayer";
+
+export const Component = () => {
+  const { title, content } = useIntlayer("component"); // Create related content declaration
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-angular.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-angular.md
new file mode 100644
index 0000000000..219443bda9
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-angular.md
@@ -0,0 +1,18 @@
+```ts
+// src/app/component.component.ts
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-component",
+  template: `
+    <div>
+      <h2>{{ content.title }}</h2>
+      <p>{{ content.content }}</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("component");
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-lit.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-lit.md
new file mode 100644
index 0000000000..2aa58cd546
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-lit.md
@@ -0,0 +1,20 @@
+```ts
+// src/components/Component.ts
+import { LitElement, html } from "lit";
+import { customElement } from "lit/decorators.js";
+import { useIntlayer } from "lit-intlayer";
+
+@customElement("my-component")
+export class MyComponent extends LitElement {
+  render() {
+    const { title, content } = useIntlayer("component");
+
+    return html`
+      <div>
+        <h2>${title}</h2>
+        <p>${content}</p>
+      </div>
+    `;
+  }
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-client.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-client.md
new file mode 100644
index 0000000000..45a309f8a8
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-client.md
@@ -0,0 +1,18 @@
+```tsx
+// src/components/Component.tsx
+
+"use client";
+
+import { useIntlayer } from "react-intlayer";
+
+export const ClientComponentComponent = () => {
+  const { title, content } = useIntlayer("client-component");
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-server.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-server.md
new file mode 100644
index 0000000000..355c68c384
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-server.md
@@ -0,0 +1,15 @@
+```tsx
+// src/components/Component.tsx
+import { useIntlayer } from "react-intlayer";
+
+export const ServerComponentComponent = () => {
+  const { title, content } = useIntlayer("server-component");
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-preact.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-preact.md
new file mode 100644
index 0000000000..8efb1b5c2e
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-preact.md
@@ -0,0 +1,15 @@
+```tsx
+// src/components/Component.tsx
+import { useIntlayer } from "preact-intlayer";
+
+export const Component = () => {
+  const { title, content } = useIntlayer("component");
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-react.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-react.md
new file mode 100644
index 0000000000..8b4e31bf62
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-react.md
@@ -0,0 +1,15 @@
+```tsx
+// src/components/Component.tsx
+import { useIntlayer } from "react-intlayer";
+
+export const Component = () => {
+  const { title, content } = useIntlayer("component");
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-solid.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-solid.md
new file mode 100644
index 0000000000..286fe28a3c
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-solid.md
@@ -0,0 +1,15 @@
+```tsx
+// src/components/Component.tsx
+import { useIntlayer } from "solid-intlayer";
+
+export const Component = () => {
+  const content = useIntlayer("component");
+
+  return (
+    <div>
+      <h2>{content.title}</h2>
+      <p>{content.content}</p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-svelte.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-svelte.md
new file mode 100644
index 0000000000..ae95f9f756
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-svelte.md
@@ -0,0 +1,12 @@
+```svelte
+<!-- src/components/Component.svelte -->
+<script lang="ts">
+  import { useIntlayer } from "svelte-intlayer";
+  const content = useIntlayer("component");
+</script>
+
+<div>
+  <h2>{content.title}</h2>
+  <p>{content.content}</p>
+</div>
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-vanilla.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-vanilla.md
new file mode 100644
index 0000000000..10ef2de45b
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-vanilla.md
@@ -0,0 +1,9 @@
+```js
+// src/components/component.js
+import { getIntlayer } from "intlayer";
+
+const { title, content } = getIntlayer("component");
+
+document.querySelector("h2").textContent = title;
+document.querySelector("p").textContent = content;
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-vue.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-vue.md
new file mode 100644
index 0000000000..3338357952
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/component-vue.md
@@ -0,0 +1,15 @@
+```vue
+<!-- src/components/Component.vue -->
+<template>
+  <div>
+    <h2>{{ content.title }}</h2>
+    <p>{{ content.content }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("component");
+</script>
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-centralized.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-centralized.md
new file mode 100644
index 0000000000..0b9e0c66ee
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-centralized.md
@@ -0,0 +1,14 @@
+```tsx
+// intlayer.config.ts
+
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-per-component.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-per-component.md
new file mode 100644
index 0000000000..abe44558d3
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-per-component.md
@@ -0,0 +1,19 @@
+```tsx
+// intlayer.config.ts
+
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  plugins: [
+    syncJSON({
+      source: ({ key, locale }) => `./i18n/${locale}/${key}.json`,
+    }),
+  ],
+};
+
+export default config;
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-en.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-en.md
new file mode 100644
index 0000000000..1c56d3f6d9
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-en.md
@@ -0,0 +1,8 @@
+```json
+// i18n/en/server-component.json
+
+{
+  "title": "Title of my component",
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-es.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-es.md
new file mode 100644
index 0000000000..56fa602d0b
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-es.md
@@ -0,0 +1,8 @@
+```json
+// i18n/es/server-component.json
+
+{
+  "title": "Título de mi componente",
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-fr.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-fr.md
new file mode 100644
index 0000000000..7225da422e
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-fr.md
@@ -0,0 +1,8 @@
+```json
+// i18n/fr/server-component.json
+
+{
+  "title": "Titre de mon composant",
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+}
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component.md
new file mode 100644
index 0000000000..51f9074c7b
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component.md
@@ -0,0 +1,20 @@
+```tsx
+// src/component/server/component.content.ts
+
+import { t, type Dictionary } from "intlayer";
+
+const componentContent = {
+  key: "server-component",
+  content: {
+    title: t({
+      en: "Title of my component",
+      fr: "Titre de mon component",
+      es: "Título de mi componente",
+    }),
+    content:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+  },
+} satisfies Dictionary;
+
+export default componentContent;
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-content.md b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-content.md
new file mode 100644
index 0000000000..36ef60e56d
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/content/server-content.md
@@ -0,0 +1,16 @@
+```tsx
+// src/component/server/Component.tsx
+
+import { useIntlayer } from "react-intlayer";
+
+export const Component = () => {
+  const { title, content } = useIntlayer("server-component"); // Create related content declaration
+
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{content}</p>
+    </div>
+  );
+};
+```
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx b/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
new file mode 100644
index 0000000000..3e1221a374
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
@@ -0,0 +1,175 @@
+import { IDE } from '@intlayer/design-system/ide';
+import { SwitchSelector } from '@intlayer/design-system/switch-selector';
+import { useTheme } from 'next-themes';
+import { type FC, useState } from 'react';
+import { type Framework, Mode, useFramework } from '../FrameworkContext';
+import { FrameworkSelector } from '../FrameworkSelector';
+import clientComponent from './content/client-component.md';
+import clientComponentI18nEn from './content/client-component-i18n-en.md';
+import clientComponentI18nEs from './content/client-component-i18n-es.md';
+import clientComponentI18nFr from './content/client-component-i18n-fr.md';
+import componentAngular from './content/component-angular.md';
+import componentLit from './content/component-lit.md';
+import componentNextClient from './content/component-next-client.md';
+import componentNextServer from './content/component-next-server.md';
+import componentPreact from './content/component-preact.md';
+import componentReact from './content/component-react.md';
+import componentSolid from './content/component-solid.md';
+import componentSvelte from './content/component-svelte.md';
+import componentVanilla from './content/component-vanilla.md';
+import componentVue from './content/component-vue.md';
+import configFileCentralized from './content/config-file-centralized.md';
+import configFilePerComponent from './content/config-file-per-component.md';
+import serverComponent from './content/server-component.md';
+
+const frameworkComponent: Record<
+  Exclude<Framework, 'next'>,
+  { path: string; content: string }
+> = {
+  react: { path: 'src/components/Component.tsx', content: componentReact },
+  vue: { path: 'src/components/Component.vue', content: componentVue },
+  svelte: {
+    path: 'src/components/Component.svelte',
+    content: componentSvelte,
+  },
+  lit: { path: 'src/components/Component.ts', content: componentLit },
+  angular: {
+    path: 'src/app/component.component.ts',
+    content: componentAngular,
+  },
+  preact: { path: 'src/components/Component.tsx', content: componentPreact },
+  solid: { path: 'src/components/Component.tsx', content: componentSolid },
+  vanilla: { path: 'src/components/component.js', content: componentVanilla },
+};
+
+const getPerComponentTabs = (framework: Framework) => {
+  if (framework === 'next') {
+    return [
+      {
+        path: 'src/components/server/component.content.ts',
+        content: serverComponent,
+        isOpen: true,
+      },
+      {
+        path: 'src/components/server/Component.tsx',
+        content: componentNextServer,
+        isOpen: true,
+      },
+      {
+        path: 'src/components/client/component.content.ts',
+        content: clientComponent,
+        isOpen: false,
+      },
+      {
+        path: 'src/components/client/Component.tsx',
+        content: componentNextClient,
+        isOpen: false,
+      },
+      {
+        path: 'intlayer.config.ts',
+        content: configFileCentralized,
+        isOpen: false,
+      },
+    ];
+  }
+
+  return [
+    {
+      path: 'src/components/component.content.ts',
+      content: clientComponent,
+      isOpen: true,
+    },
+    {
+      path: frameworkComponent[framework].path,
+      content: frameworkComponent[framework].content,
+      isOpen: true,
+    },
+    {
+      path: 'intlayer.config.ts',
+      content: configFileCentralized,
+      isOpen: false,
+    },
+  ];
+};
+
+const getCentralizedTabs = (framework: Framework) => {
+  if (framework === 'next') {
+    return [
+      {
+        path: 'i18n/en/component.json',
+        content: clientComponentI18nEn,
+        isOpen: true,
+      },
+      {
+        path: 'i18n/es/component.json',
+        content: clientComponentI18nEs,
+        isOpen: false,
+      },
+      {
+        path: 'i18n/fr/component.json',
+        content: clientComponentI18nFr,
+        isOpen: false,
+      },
+      {
+        path: 'src/components/server/Component.tsx',
+        content: componentNextServer,
+        isOpen: true,
+      },
+      {
+        path: 'src/components/client/Component.tsx',
+        content: componentNextClient,
+        isOpen: false,
+      },
+      {
+        path: 'intlayer.config.ts',
+        content: configFilePerComponent,
+        isOpen: false,
+      },
+    ];
+  }
+
+  return [
+    {
+      path: 'i18n/en/component.json',
+      content: clientComponentI18nEn,
+      isOpen: true,
+    },
+    {
+      path: 'i18n/es/component.json',
+      content: clientComponentI18nEs,
+      isOpen: false,
+    },
+    {
+      path: 'i18n/fr/component.json',
+      content: clientComponentI18nFr,
+      isOpen: false,
+    },
+    {
+      path: frameworkComponent[framework].path,
+      content: frameworkComponent[framework].content,
+      isOpen: true,
+    },
+  ];
+};
+
+export const IDESection: FC = () => {
+  const { resolvedTheme } = useTheme();
+  const { framework, mode } = useFramework();
+
+  const tabs =
+    mode === 'per-component'
+      ? getPerComponentTabs(framework)
+      : getCentralizedTabs(framework);
+
+  return (
+    <div className="flex min-h-90 flex-col items-center justify-center gap-3">
+      <IDE
+        isDarkMode={resolvedTheme === 'dark'}
+        pages={tabs}
+        activeTab={0}
+        className="m-0! mx-auto flex-1 p-0! text-xs"
+        key={`${mode}-${framework}`}
+      />
+    </div>
+  );
+};
diff --git a/apps/website/src/components/LandingPage/NEW/ModeSelector.tsx b/apps/website/src/components/LandingPage/NEW/ModeSelector.tsx
new file mode 100644
index 0000000000..d33354fa61
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/ModeSelector.tsx
@@ -0,0 +1,22 @@
+import { SwitchSelector } from '@intlayer/design-system/switch-selector';
+import { type Mode, useFramework } from './FrameworkContext';
+
+const modeSwitchChoices: { content: string; value: Mode }[] = [
+  { content: 'Per-component', value: 'per-component' },
+  { content: 'Centralized', value: 'centralized' },
+];
+
+export const ModeSelector = () => {
+  const { mode, setMode } = useFramework();
+
+  return (
+    <SwitchSelector
+      choices={modeSwitchChoices}
+      value={mode}
+      onChange={setMode}
+      size="sm"
+      color="foreground"
+      itemClassName="text-nowrap"
+    />
+  );
+};
diff --git a/apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx b/apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx
new file mode 100644
index 0000000000..30f9e474c4
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx
@@ -0,0 +1,47 @@
+import { StatsRecording } from 'framer-motion';
+import { type FC, useState } from 'react';
+import { useIntlayer } from 'react-intlayer';
+import { CompilerSection } from './CompilerSection';
+import { FrameworkProvider, Mode } from './FrameworkContext';
+import { FrameworkSelector } from './FrameworkSelector';
+import { IDESection } from './IDESection';
+import { ModeSelector } from './ModeSelector';
+
+export const FeaturesSection: FC = () => {
+  const sectionsData = useIntlayer('features-section');
+  return (
+    <FrameworkProvider>
+      <div className="flex items-center justify-between border-b p-6">
+        <h1 className="text-2xl">Customize your experience</h1>
+        <div className="flex flex-row flex-wrap items-center gap-3">
+          <ModeSelector />
+          <FrameworkSelector />
+        </div>
+      </div>
+      <section className="grid grid-cols-4 gap-px border-b bg-border">
+        <div className="col-span-2 flex flex-col gap-4 bg-background p-6">
+          <IDESection />
+          <h1 className="text-3xl">{sectionsData[0].title}</h1>
+          <p className="text-muted-foreground leading-6">
+            {sectionsData[0].description}
+          </p>
+        </div>
+        <div className="col-span-2 flex flex-col gap-4 bg-background p-6">
+          <CompilerSection />
+          <h1 className="text-3xl">{sectionsData[1].title}</h1>
+          <p className="text-muted-foreground leading-6">
+            {sectionsData[1].description}
+          </p>
+        </div>
+
+        <div className="col-span-4 flex flex-col gap-4 bg-background p-6">
+          <CompilerSection />
+          <h1 className="text-3xl">{sectionsData[1].title}</h1>
+          <p className="text-muted-foreground leading-6">
+            {sectionsData[1].description}
+          </p>
+        </div>
+      </section>
+    </FrameworkProvider>
+  );
+};
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index cfd2380d40..b364f6ce43 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -24,7 +24,9 @@ const WhyToChoseIntlayerSection = lazy(() =>
 );
 
 const FeaturesSection = lazy(() =>
-  import('./FeaturesSection').then((mod) => ({ default: mod.FeaturesSection }))
+  import('./NEW/RedesignedFeatures').then((mod) => ({
+    default: mod.FeaturesSection,
+  }))
 );
 
 const I18nBenchmarkSection = lazy(() =>
@@ -105,11 +107,7 @@ export const LandingPage: FC = () => {
             <ProductsSection />
           </Suspense>
         </section>
-        <section aria-label={content.technologiesSection.value}>
-          <Suspense fallback={<Loader />}>
-            <AvailableTechnoSection />
-          </Suspense>
-        </section>
+
         <section aria-label={content.liveDemoSection.value}>
           <Suspense fallback={<Loader />}>
             <DemoSection />
diff --git a/packages/@intlayer/design-system/src/components/IDE/IDE.tsx b/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
index 090c855f4a..fecd32640f 100644
--- a/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
@@ -71,7 +71,7 @@ export const IDE: FC<IDEProps> = ({
           <div className="size-3 rounded-full bg-yellow-500" />
           <div className="size-3 rounded-full bg-green-500" />
         </div>
-        <div className="flex size-full overflow-y-auto">
+        <div className="flex h-full divide-x overflow-y-auto border-x">
           {tabs.map(({ path }, index) => {
             const fullPath = path.split('/');
             const title = fullPath[fullPath.length - 1];
@@ -82,8 +82,8 @@ export const IDE: FC<IDEProps> = ({
                 className={cn(
                   'flex h-8 min-w-20 max-w-100 items-center justify-start truncate text-nowrap px-3 py-1 transition',
                   isActive
-                    ? 'bg-foreground text-background'
-                    : 'cursor-pointer hover:bg-foreground/50 hover:text-background'
+                    ? 'bg-background font-medium text-foreground'
+                    : 'cursor-pointer opacity-80 hover:text-foreground hover:opacity-100'
                 )}
                 key={title}
                 onClick={() => setActiveTab(index)}
@@ -107,7 +107,7 @@ export const IDE: FC<IDEProps> = ({
               </div>
             </WithResizer>
 
-            <div className="size-full flex-1 overflow-auto pt-2 text-xs">
+            <div className="size-full flex-1 overflow-auto bg-background text-xs">
               {content && <MarkdownRenderer>{content}</MarkdownRenderer>}
             </div>
           </div>
diff --git a/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx b/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
index 53518535d1..07c0356a9f 100644
--- a/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
+++ b/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
@@ -31,13 +31,13 @@ const shuffleArray = (array: string[], limit?: number) => {
 
 const LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (
   <div
-    className="group z-10 mx-8 inline-flex shrink-0 rounded-lg border transition-transform duration-300 hover:scale-105"
+    className="group z-10 mx-8 inline-flex shrink-0 scale-95 rounded-lg border transition-transform duration-300 hover:scale-100"
     {...props}
   >
     <div className="flex flex-row items-center gap-5 px-3 py-1">
       <Flag
         locale={locale as Locale}
-        className="size-5 rounded-sm grayscale-80 transition duration-300 group-hover:grayscale-0"
+        className="size-5 rounded-sm grayscale-50 transition duration-300 group-hover:grayscale-0"
         width={640}
         height={480}
         loading="lazy"

From 6e92ca0cc85c4ed9ca191d587eed148b04c60bd9 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Mon, 24 Aug 2026 01:06:50 +0200
Subject: [PATCH 13/32] refactor(website): complete features bento grid and
 visual editor section

---
 .../LandingPage/NEW/IDESection/index.tsx      |  2 +-
 .../LandingPage/NEW/RedesignedFeatures.tsx    | 46 ++++++++++--
 .../NEW/TestSection/index.content.ts          | 36 +++++++++
 .../LandingPage/NEW/TestSection/index.tsx     | 53 +++++++++++++
 .../NEW/VisualEditorSection/index.content.ts  | 75 +++++++++++++++++++
 .../NEW/VisualEditorSection/index.tsx         | 72 ++++++++++++++++++
 .../src/components/LandingPage/index.tsx      |  2 +-
 .../design-system/src/components/IDE/IDE.tsx  |  8 +-
 .../src/components/IDE/MarkDownRender.tsx     | 11 ++-
 .../LanguageBackground/LanguageSection.tsx    | 11 ++-
 .../src/components/Terminal/Terminal.tsx      |  4 +-
 11 files changed, 301 insertions(+), 19 deletions(-)
 create mode 100644 apps/website/src/components/LandingPage/NEW/TestSection/index.content.ts
 create mode 100644 apps/website/src/components/LandingPage/NEW/TestSection/index.tsx
 create mode 100644 apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.content.ts
 create mode 100644 apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.tsx

diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx b/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
index 3e1221a374..4b8b0699b6 100644
--- a/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
@@ -167,7 +167,7 @@ export const IDESection: FC = () => {
         isDarkMode={resolvedTheme === 'dark'}
         pages={tabs}
         activeTab={0}
-        className="m-0! mx-auto flex-1 p-0! text-xs"
+        className="m-0! mx-auto flex-1 p-0! text-xs [&>pre:bg-back]:bg-background"
         key={`${mode}-${framework}`}
       />
     </div>
diff --git a/apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx b/apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx
index 30f9e474c4..51a2e2fb72 100644
--- a/apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx
+++ b/apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx
@@ -1,13 +1,21 @@
+import { LanguageSection } from '@intlayer/design-system/language-background';
+import { Link } from '@intlayer/design-system/link';
+import { Website_Playground_Path } from '@intlayer/design-system/routes';
 import { StatsRecording } from 'framer-motion';
+import { getLocalizedUrl } from 'intlayer';
+import { CircleArrowRight, PlaySquare } from 'lucide-react';
 import { type FC, useState } from 'react';
-import { useIntlayer } from 'react-intlayer';
+import { useIntlayer, useLocale } from 'react-intlayer';
 import { CompilerSection } from './CompilerSection';
 import { FrameworkProvider, Mode } from './FrameworkContext';
 import { FrameworkSelector } from './FrameworkSelector';
 import { IDESection } from './IDESection';
 import { ModeSelector } from './ModeSelector';
-
+import { TestSection } from './TestSection';
+import { VisualEditorSection } from './VisualEditorSection';
 export const FeaturesSection: FC = () => {
+  const { locale } = useLocale();
+  const { gotToPlaygroundButton } = useIntlayer('visual-editor-section');
   const sectionsData = useIntlayer('features-section');
   return (
     <FrameworkProvider>
@@ -35,10 +43,38 @@ export const FeaturesSection: FC = () => {
         </div>
 
         <div className="col-span-4 flex flex-col gap-4 bg-background p-6">
-          <CompilerSection />
-          <h1 className="text-3xl">{sectionsData[1].title}</h1>
+          <LanguageSection />
+          <h1 className="text-3xl">{sectionsData[3].title}</h1>
           <p className="text-muted-foreground leading-6">
-            {sectionsData[1].description}
+            {sectionsData[3].description}
+          </p>
+        </div>
+
+        <div className="col-span-2 flex flex-col gap-4 bg-background p-6">
+          <VisualEditorSection />
+          <h1 className="text-3xl">{sectionsData[2].title}</h1>
+          <p className="text-muted-foreground leading-6">
+            {sectionsData[2].description}
+          </p>
+          <Link
+            href={getLocalizedUrl(Website_Playground_Path, locale)}
+            target="_blank"
+            variant="button"
+            color="text"
+            roundedSize="sm"
+            label={gotToPlaygroundButton.label.value}
+          >
+            <span className="flex items-center justify-center gap-2">
+              {gotToPlaygroundButton.text}
+              <PlaySquare />
+            </span>
+          </Link>
+        </div>
+        <div className="col-span-2 flex flex-col gap-4 bg-background p-6">
+          <TestSection />
+          <h1 className="text-3xl">{sectionsData[4].title}</h1>
+          <p className="text-muted-foreground leading-6">
+            {sectionsData[4].description}
           </p>
         </div>
       </section>
diff --git a/apps/website/src/components/LandingPage/NEW/TestSection/index.content.ts b/apps/website/src/components/LandingPage/NEW/TestSection/index.content.ts
new file mode 100644
index 0000000000..051d6f73a7
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/TestSection/index.content.ts
@@ -0,0 +1,36 @@
+import type { Dictionary } from 'intlayer';
+
+// ANSI color codes matching the CLI output
+const RESET = '\x1b[0m';
+const BEIGE = '\x1b[38;5;3m';
+const RED = '\x1b[31m';
+const GREEN = '\x1b[32m';
+const GREY_DARK = '\x1b[38;5;239m';
+
+const testSectionContent = {
+  key: 'test-section',
+  content: [
+    '$ npx intlayer test',
+    '',
+    'Missing translations:',
+    ` - ${BEIGE}blog-post${RESET}        - ${RED}French (fr), Spanish (es)${RESET}     - ${GREY_DARK}src/components/BlogPost/blogPost.content.ts${RESET}`,
+    ` - ${BEIGE}features-section${RESET} - ${RED}Spanish (es)${RESET}                  - ${GREY_DARK}src/components/FeaturesSection/featuresSection.content.ts${RESET}`,
+    ` - ${BEIGE}product-card${RESET}     - ${RED}French (fr)${RESET}                   - ${GREY_DARK}src/components/ProductCard/productCard.content.ts${RESET}`,
+    ` - ${BEIGE}product-page${RESET}     - ${RED}Spanish (es)${RESET}                  - ${GREY_DARK}src/components/ProductPage/productPage.content.ts${RESET}`,
+    ` - ${BEIGE}about-section${RESET}    - ${RED}French (fr), Spanish (es)${RESET}     - ${GREY_DARK}src/components/AboutSection/aboutSection.content.ts${RESET}`,
+    ` - ${BEIGE}faq-section${RESET}      - ${RED}Spanish (es)${RESET}                  - ${GREY_DARK}src/components/FAQSection/faqSection.content.ts${RESET}`,
+    ` - ${BEIGE}contact-form${RESET}     - ${RED}French (fr), Spanish (es)${RESET}     - ${GREY_DARK}src/components/ContactForm/contactForm.content.ts${RESET}`,
+    ` - ${BEIGE}user-settings${RESET}    - ${RED}Spanish (es)${RESET}                  - ${GREY_DARK}src/components/UserSettings/userSettings.content.ts${RESET}`,
+    ` - ${BEIGE}dashboard-widgets${RESET}- ${RED}French (fr)${RESET}                   - ${GREY_DARK}src/components/DashboardWidgets/dashboardWidgets.content.ts${RESET}`,
+    `Locales: ${GREEN}English (en), French (fr), Spanish (es)${RESET}`,
+    `Required locales: ${GREEN}English (en)${RESET}`,
+    `Missing locales: ${RED}French (fr), Spanish (es)${RESET}`,
+    `Missing required locales: ${GREEN}—${RESET}`,
+    `Total missing locales: ${RED}2${RESET}`,
+    `Total missing required locales: ${GREEN}0${RESET}`,
+    '',
+    '',
+  ],
+} satisfies Dictionary;
+
+export default testSectionContent;
diff --git a/apps/website/src/components/LandingPage/NEW/TestSection/index.tsx b/apps/website/src/components/LandingPage/NEW/TestSection/index.tsx
new file mode 100644
index 0000000000..f97c369342
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/TestSection/index.tsx
@@ -0,0 +1,53 @@
+import { Terminal } from '@intlayer/design-system/terminal';
+import { useTheme } from 'next-themes';
+import { type FC, useEffect, useState } from 'react';
+import { type IntlayerNode, useIntlayer } from 'react-intlayer';
+
+export const TestSection: FC = () => {
+  const content = useIntlayer('test-section');
+  const { resolvedTheme } = useTheme();
+  const isDarkMode = resolvedTheme === 'dark';
+
+  const nbItems = content.length - 2;
+  const [itemsToShow, setItemsToShow] = useState(0);
+  const [additionalContent, setAdditionalContent] = useState('');
+
+  useEffect(() => {
+    if (itemsToShow >= nbItems) return;
+
+    const timeout = setTimeout(() => {
+      setItemsToShow((prev) => prev + 1);
+    }, 150);
+
+    return () => clearTimeout(timeout);
+  }, [itemsToShow, nbItems]);
+
+  const handleSubmit = (value: string) => {
+    setAdditionalContent((prev) => (prev ? `${prev}\n${value}` : value));
+  };
+
+  const displayContent = content
+    .map((item: IntlayerNode, index: number) => {
+      if (index < itemsToShow) {
+        return item.value;
+      }
+
+      return '';
+    })
+    .join('\n');
+
+  const fullContent = additionalContent
+    ? `${displayContent}\n${additionalContent}`
+    : displayContent;
+
+  return (
+    <Terminal
+      isDarkMode={isDarkMode}
+      title="intlayer test"
+      className="w-full flex-1 overflow-auto text-xs"
+      onSubmit={handleSubmit}
+    >
+      {fullContent}
+    </Terminal>
+  );
+};
diff --git a/apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.content.ts b/apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.content.ts
new file mode 100644
index 0000000000..0e7bd15f33
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.content.ts
@@ -0,0 +1,75 @@
+import { type Dictionary, t } from 'intlayer';
+
+const featuresSectionContent = {
+  key: 'visual-editor-section',
+  content: {
+    description: t({
+      en: 'Try it for free using the playground.',
+      'en-GB': 'Try it for free using the playground.',
+      fr: 'Essayez-le gratuitement en utilisant le playground.',
+      es: 'Pruébelo gratis usando el playground.',
+      de: 'Probieren Sie es kostenlos mit dem Playground.',
+      it: 'Provalo gratuitamente usando il playground.',
+      ja: 'プレイグラウンドを使用して無料で試してみてください。',
+      ar: 'جربه مجاناً باستخدام الملعب.',
+      hi: 'प्लेग्राउंड का उपयोग करके मुफ्त में खेलें।',
+      ko: '플레이그라운드를 사용하여 무료로 시도하세요.',
+      tr: 'Playground kullanarak ücretsiz deneyin.',
+      pl: 'Wypróbuj za darmo, korzystając z playgrounda.',
+      ru: 'Попробуйте бесплатно, воспользовавшись песочницей.',
+      zh: '在 playground 中免费试用。',
+      pt: 'Experimente gratuitamente no playground.',
+      id: 'Coba gratis menggunakan playground.',
+      vi: 'Dùng thử miễn phí với playground.',
+      uk: 'Спробуйте безкоштовно у плейграунді.',
+    }),
+    gotToPlaygroundButton: {
+      text: t({
+        en: 'Go to playground',
+        'en-GB': 'Go to playground',
+        fr: 'Aller au playground',
+        es: 'Ir al playground',
+        de: 'Gehe zum Playground',
+        it: 'Vai al playground',
+        pt: 'Ir au playground',
+        ru: 'Перейти к плейграунду',
+        zh: '前往演示场',
+        ja: 'プレイグラウンドに移動',
+        ar: 'اذهب إلى الملعب',
+        hi: 'प्लेग्राउंड पर जाएं',
+        ko: '플레이그라운드로 이동',
+        tr: "Playground'a git",
+        pl: 'Przejdź do playgrounda',
+        id: 'Buka playground',
+        vi: 'Đi tới playground',
+        uk: 'Перейти до плейграунду',
+      }),
+      label: t({
+        en: 'Click to go to the playground',
+        'en-GB': 'Click to go to the playground',
+        fr: 'Cliquez pour aller au playground',
+        es: 'Haga clic para ir al playground',
+        de: 'Klicken Sie hier, um zum Playground zu gelangen',
+        it: 'Fai clic per andare al playground',
+        pt: 'Clique aqui para ir ao playground',
+        ru: 'Нажмите, чтобы перейти к плейграунду',
+        zh: '点击这里前往演示场',
+        ja: 'クリックしてプレイグラウンドに移動します',
+        ar: 'انقر للذهاب إلى الملعب',
+        hi: 'प्लेग्राउंड पर जाएं',
+        ko: '클릭하여 플레이그라운드로 이동',
+        tr: "Playground'a gitmek için tıklayın",
+        pl: 'Kliknij, aby przejść do playgrounda',
+        id: 'Klik untuk membuka playground',
+        vi: 'Nhấp để vào playground',
+        uk: 'Натисніть, щоб перейти до плейграунду',
+      }),
+    },
+  },
+  title: 'Visual editor section',
+  description:
+    'Content for the Visual Editor section of the landing page, encouraging users to try the playground for free with a call-to-action button.',
+  tags: ['landing page', 'feature section', 'playground'],
+} satisfies Dictionary;
+
+export default featuresSectionContent;
diff --git a/apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.tsx b/apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.tsx
new file mode 100644
index 0000000000..55aec36a47
--- /dev/null
+++ b/apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.tsx
@@ -0,0 +1,72 @@
+import { Link } from '@intlayer/design-system/link';
+import { Website_Playground_Path } from '@intlayer/design-system/routes';
+import { getLocalizedUrl } from 'intlayer';
+import { CircleArrowRight } from 'lucide-react';
+import { type FC, useEffect, useRef, useState } from 'react';
+import { useIntlayer, useLocale } from 'react-intlayer';
+
+export const VisualEditorSection: FC = () => {
+  const { description, gotToPlaygroundButton } = useIntlayer(
+    'visual-editor-section'
+  );
+  const { locale } = useLocale();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: '200px' }
+    );
+
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !isVisible) return;
+    video.load();
+    video.play().catch(() => undefined);
+  }, [isVisible]);
+
+  return (
+    <div ref={containerRef}>
+      <video
+        ref={videoRef}
+        className="rounded-lg"
+        aria-label="Visual Editor"
+        loop
+        muted
+        playsInline
+        width={3024}
+        height={1812}
+        preload="none"
+        poster="/assets/visual_editor.webp"
+      >
+        {isVisible && (
+          <>
+            <source src="/assets/visual_editor.mp4" type="video/mp4" />
+            <source src="/assets/visual_editor.webm" type="video/webm" />
+          </>
+        )}
+        <track
+          src="/assets/visual_editor.vtt"
+          srcLang="en"
+          kind="captions"
+          label="English"
+          default
+        />
+      </video>
+    </div>
+  );
+};
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index b364f6ce43..0c034e12ab 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -24,7 +24,7 @@ const WhyToChoseIntlayerSection = lazy(() =>
 );
 
 const FeaturesSection = lazy(() =>
-  import('./NEW/RedesignedFeatures').then((mod) => ({
+  import('./FeaturesSection').then((mod) => ({
     default: mod.FeaturesSection,
   }))
 );
diff --git a/packages/@intlayer/design-system/src/components/IDE/IDE.tsx b/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
index fecd32640f..18598c62d4 100644
--- a/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
@@ -107,8 +107,12 @@ export const IDE: FC<IDEProps> = ({
               </div>
             </WithResizer>
 
-            <div className="size-full flex-1 overflow-auto bg-background text-xs">
-              {content && <MarkdownRenderer>{content}</MarkdownRenderer>}
+            <div className="size-full flex-1 overflow-auto bg-background text-xs [&>pre]:bg-red-400!">
+              {content && (
+                <MarkdownRenderer codeClassName="bg-background rounded-none">
+                  {content}
+                </MarkdownRenderer>
+              )}
             </div>
           </div>
         </div>
diff --git a/packages/@intlayer/design-system/src/components/IDE/MarkDownRender.tsx b/packages/@intlayer/design-system/src/components/IDE/MarkDownRender.tsx
index 4abdf4cf5e..ff02a76c43 100644
--- a/packages/@intlayer/design-system/src/components/IDE/MarkDownRender.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/MarkDownRender.tsx
@@ -1,13 +1,20 @@
+import cn from 'cnfast';
 import type { FC } from 'react';
 import { MarkdownRenderer as MarkdownRendererIntlayer } from 'react-intlayer/markdown';
 import { Code } from './Code';
 import type { CodeLanguage } from './shikiLanguages';
 
 type MarkdownRendererProps = {
+  isDarkMode?: boolean;
+  codeClassName?: string;
   children: string;
 };
 
-export const MarkdownRenderer: FC<MarkdownRendererProps> = ({ children }) => (
+export const MarkdownRenderer: FC<MarkdownRendererProps> = ({
+  children,
+  isDarkMode,
+  codeClassName,
+}) => (
   <MarkdownRendererIntlayer
     components={{
       code: (props) => (
@@ -15,7 +22,7 @@ export const MarkdownRenderer: FC<MarkdownRendererProps> = ({ children }) => (
           {...props}
           language={props.className?.replace('lang-', '') as CodeLanguage}
           showHeader={false}
-          className="text-xs leading-5"
+          className={cn('text-xs leading-5', codeClassName)}
         >
           {props.children as string}
         </Code>
diff --git a/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx b/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
index 07c0356a9f..e680d9998b 100644
--- a/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
+++ b/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
@@ -53,11 +53,10 @@ const LocalCard: FC<{ locale: string }> = ({ locale, ...props }) => (
   </div>
 );
 
-const LocalCardList: FC<{ localeList: string[]; className?: string }> = ({
-  localeList,
-  className,
-  ...props
-}) => (
+export const LocalCardList: FC<{
+  localeList: string[];
+  className?: string;
+}> = ({ localeList, className, ...props }) => (
   <div className="relative flex w-full overflow-hidden" {...props}>
     <div
       className={cn('inline-flex shrink-0 will-change-transform', className)}
@@ -96,7 +95,7 @@ export const LanguageSection: FC<HTMLAttributes<HTMLElement>> = ({
 
   return (
     <section
-      className={cn('w-full overflow-hidden border-b py-6', className)}
+      className={cn('w-full overflow-hidden py-3', className)}
       {...props}
     >
       <div className="relative flex w-full flex-col gap-5 py-3">
diff --git a/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx b/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
index f910fc92a0..19390353c3 100644
--- a/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
+++ b/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
@@ -109,9 +109,9 @@ export const Terminal: FC<TerminalProps> = ({
 
   return (
     <Container
-      roundedSize="2xl"
+      roundedSize="lg"
       className={cn(
-        'flex min-w-0 max-w-full flex-col overflow-hidden font-mono',
+        'flex min-w-0 max-w-full flex-col overflow-hidden border font-mono',
         className
       )}
       {...containerProps}

From 059f562f13b43a874a6e707d9f2789153ad89c13 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Tue, 25 Aug 2026 17:46:13 +0200
Subject: [PATCH 14/32] style(website): improve documentation table and add
 footer status badge

---
 .../src/components/DocPage/DocPageLayout.tsx     |  2 +-
 .../website/src/components/LandingPage/index.tsx |  4 +++-
 .../design-system/src/components/Badge/index.tsx |  3 ++-
 .../src/components/Browser/Browser.tsx           |  4 ++--
 .../src/components/Carousel/index.tsx            |  4 ++--
 .../ContentEditorView/TextEditor.tsx             | 10 ++++++----
 .../DictionaryFieldEditor.tsx                    |  2 +-
 .../DictionaryFieldEditor/SaveForm/SaveForm.tsx  |  4 +++-
 .../StructureView/StructureView.tsx              |  2 +-
 .../VersionSwitcherDropDown/VersionSwitcher.tsx  |  2 +-
 .../src/components/Footer/index.tsx              | 16 ++++++++++++++--
 .../design-system/src/components/IDE/Code.tsx    |  4 ++--
 .../src/components/IDE/FileList.tsx              |  2 +-
 .../src/components/Input/Checkbox.tsx            |  2 +-
 .../design-system/src/components/Link/Link.tsx   |  2 +-
 .../components/MarkDownRender/MarkDownIframe.tsx |  2 +-
 .../components/MarkDownRender/MarkDownRender.tsx |  2 +-
 .../design-system/src/components/Modal/Modal.tsx |  1 -
 .../src/components/Navbar/DesktopNavbar.tsx      |  2 +-
 .../src/components/RightDrawer/RightDrawer.tsx   |  2 +-
 .../src/components/Table/SmartTable.tsx          |  4 ++--
 .../design-system/src/components/Table/Table.tsx | 11 ++++++++++-
 .../src/components/Terminal/Terminal.tsx         |  2 +-
 23 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/apps/website/src/components/DocPage/DocPageLayout.tsx b/apps/website/src/components/DocPage/DocPageLayout.tsx
index 19353c7139..ca7eeed7a8 100644
--- a/apps/website/src/components/DocPage/DocPageLayout.tsx
+++ b/apps/website/src/components/DocPage/DocPageLayout.tsx
@@ -35,7 +35,7 @@ export const DocPageLayout: FC<DocPageLayoutProps> = ({
         >
           <DocNavList docData={docData} activeSlugs={['doc', ...activeSlugs]} />
         </aside>
-        <div className="mr-1 mb-3 flex min-h-0 min-w-0 flex-1 flex-row rounded-2xl border border-neutral/40 bg-background md:mr-2">
+        <div className="mx-1 my-3 flex min-h-0 min-w-0 flex-1 flex-row rounded-2xl border border-neutral/40 bg-background md:mr-2">
           <article
             aria-label={content.documentationContent.value}
             className="no-scrollbar relative mb-3 h-full max-h-[calc(100vh-4.5rem)] w-auto flex-1 grow overflow-auto px-4 pb-24 max-md:pl-10 md:px-10"
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index 0c034e12ab..46f8e47856 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -29,6 +29,8 @@ const FeaturesSection = lazy(() =>
   }))
 );
 
+// You can swap the import to the new section proposition in src/components/LandingPage/NEW/RedesignedFeatures.tsx
+
 const I18nBenchmarkSection = lazy(() =>
   import('./I18nBenchmarkSection').then((mod) => ({
     default: mod.I18nBenchmarkSection,
@@ -92,7 +94,7 @@ export const LandingPage: FC = () => {
 
         <section aria-label={content.supportedLanguagesSection.value}>
           <Suspense fallback={<Loader />}>
-            <LanguageSection />
+            <LanguageSection className="border-b" />
           </Suspense>
         </section>
 
diff --git a/packages/@intlayer/design-system/src/components/Badge/index.tsx b/packages/@intlayer/design-system/src/components/Badge/index.tsx
index 5749c395ef..28d62390e2 100644
--- a/packages/@intlayer/design-system/src/components/Badge/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Badge/index.tsx
@@ -43,7 +43,8 @@ export const badgeVariants = cva(
           'border-secondary bg-secondary text-secondary hover:bg-secondary-300',
         success: 'border-success bg-success text-success hover:bg-success-500',
         error: 'border-error bg-error text-error hover:bg-error-500',
-        neutral: 'border-neutral bg-neutral text-neutral hover:bg-neutral-600',
+        neutral:
+          'border-neutral bg-neutral text-muted-foreground hover:bg-neutral-600',
         light: 'border-white bg-white text-white hover:bg-neutral-500',
         dark: 'border-neutral-800 bg-neutral-800 text-neutral-800 hover:bg-neutral-900',
         text: 'border-text bg-text text-foreground hover:opacity-80',
diff --git a/packages/@intlayer/design-system/src/components/Browser/Browser.tsx b/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
index 6356e5c4ab..a3c28a0f35 100644
--- a/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
+++ b/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
@@ -470,12 +470,12 @@ export const Browser = ({
                   aria-label={content.sitemapButtonLabel.value}
                 >
                   {sitemapLoading ? (
-                    <li className="px-3 py-4 text-center text-neutral text-xs">
+                    <li className="px-3 py-4 text-center text-muted-foreground text-xs">
                       {content.sitemapLoading}
                     </li>
                   ) : sitemapError ||
                     (!sitemapLoading && filteredSitemapUrls.length === 0) ? (
-                    <li className="px-3 py-4 text-center text-neutral text-xs">
+                    <li className="px-3 py-4 text-center text-muted-foreground text-xs">
                       {sitemapError
                         ? content.sitemapError
                         : content.sitemapEmpty}
diff --git a/packages/@intlayer/design-system/src/components/Carousel/index.tsx b/packages/@intlayer/design-system/src/components/Carousel/index.tsx
index 55b66155bd..2c42b63b46 100644
--- a/packages/@intlayer/design-system/src/components/Carousel/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Carousel/index.tsx
@@ -171,7 +171,7 @@ const CarouselIndicators: FC<CarouselIndicatorsProps> = ({
 
         <Popover.Detail identifier="carousel-prev">
           <div className="flex items-center gap-2 p-2">
-            <span className="whitespace-nowrap text-neutral text-xs">
+            <span className="whitespace-nowrap text-muted-foreground text-xs">
               {previousSlide.value}
             </span>
             <KeyboardShortcut
@@ -220,7 +220,7 @@ const CarouselIndicators: FC<CarouselIndicatorsProps> = ({
 
         <Popover.Detail identifier="carousel-next">
           <div className="flex items-center gap-2 p-2">
-            <span className="whitespace-nowrap text-neutral text-xs">
+            <span className="whitespace-nowrap text-muted-foreground text-xs">
               {nextSlide.value}
             </span>
             <KeyboardShortcut
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
index 55e82498fd..9eaba268c3 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
@@ -329,7 +329,7 @@ const EnumerationTextEditor: FC<TextEditorProps> = ({
                         variant="hoverable"
                         size="sm"
                         color="error"
-                        className="ml-auto text-neutral hover:text-error"
+                        className="ml-auto text-muted-foreground hover:text-error"
                         Icon={Trash}
                         onClick={() =>
                           addEditedContent(
@@ -451,7 +451,7 @@ const SelectTextEditor: FC<TextEditorProps> = ({
                         variant="hoverable"
                         size="sm"
                         color="error"
-                        className="ml-auto text-neutral hover:text-error"
+                        className="ml-auto text-muted-foreground hover:text-error"
                         Icon={Trash}
                         onClick={() =>
                           addEditedContent(
@@ -699,7 +699,7 @@ const ArrayTextEditor: FC<TextEditorProps> = ({
                         variant="hoverable"
                         size="sm"
                         color="error"
-                        className="ml-auto text-neutral hover:text-error"
+                        className="ml-auto text-muted-foreground hover:text-error"
                         onClick={() => {
                           const newKeyPath: KeyPath[] = [
                             ...keyPath,
@@ -1099,7 +1099,9 @@ export const TextEditor = memo<TextEditorProps>(function TextEditor({
     return (
       <div className="flex w-full flex-col gap-2">
         <span>(React Node)</span>
-        <span className="flex text-neutral text-xs">{tsxNotEditable}</span>
+        <span className="flex text-muted-foreground text-xs">
+          {tsxNotEditable}
+        </span>
       </div>
     );
   }
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
index c938302f8d..f2405453ae 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
@@ -156,7 +156,7 @@ export const DictionaryFieldEditor: FC<DictionaryFieldEditorProps> = ({
           >
             <CopyToClipboard
               text={dictionary.id!}
-              className="text-nowrap text-neutral text-sm"
+              className="text-nowrap text-muted-foreground text-sm"
               size={9}
             >
               {dictionary.id}
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
index d0288663b8..942da23f85 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
@@ -154,7 +154,9 @@ export const SaveForm: FC<DictionaryDetailsProps> = ({
         padding="md"
       >
         <form className="size-full">
-          <p className="py-4 text-neutral text-sm">{confirmation.message}</p>
+          <p className="py-4 text-muted-foreground text-sm">
+            {confirmation.message}
+          </p>
 
           <div className="mt-12 flex justify-end gap-2 max-md:flex-col">
             <FormButton
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/StructureView/StructureView.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/StructureView/StructureView.tsx
index 9692b9a9e8..a222c89cd9 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/StructureView/StructureView.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/StructureView/StructureView.tsx
@@ -212,7 +212,7 @@ export const NodeView: FC<NodeWrapperProps> = ({
               />
             </div>
 
-            <span className="ml-3 text-neutral text-sm">
+            <span className="ml-3 text-muted-foreground text-sm">
               ( {camelCaseToSentence(sectionKey)} )
             </span>
           </div>
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx
index 6a7d5a0fc2..12d6fa4ad2 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/VersionSwitcherDropDown/VersionSwitcher.tsx
@@ -67,7 +67,7 @@ export const VersionSwitcher: FC<VersionSwitcherProps> = ({ panelProps }) => {
                     textAlign="left"
                     size="sm"
                   >
-                    <div className="flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-neutral text-sm">
+                    <div className="flex flex-1 flex-row items-center justify-between gap-3 px-2 py-1 text-muted-foreground text-sm">
                       {version}
                     </div>
                   </Button>
diff --git a/packages/@intlayer/design-system/src/components/Footer/index.tsx b/packages/@intlayer/design-system/src/components/Footer/index.tsx
index 666d9c9e03..00ef6cde4c 100644
--- a/packages/@intlayer/design-system/src/components/Footer/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Footer/index.tsx
@@ -125,12 +125,24 @@ export const Footer: FC<FooterProps> = ({ links, footerText }) => (
   <footer className="flex flex-auto flex-row flex-wrap items-center justify-around gap-10 border-t p-6">
     <aside className="flex flex-col items-center justify-between gap-3 md:w-1/4">
       <LogoWithTextBelow className="size-full max-w-30" />
-      <span className="text-center text-neutral text-xs">
+      <span className="text-center text-muted-foreground text-xs">
         © 2026 Intlayer, Inc.
       </span>
       {footerText && (
-        <span className="text-center text-neutral text-xs">{footerText}</span>
+        <span className="text-center text-muted-foreground text-xs">
+          {footerText}
+        </span>
       )}
+      <div className="w-43">
+        <iframe
+          src="https://status.intlayer.org/badge?theme=dark"
+          height="30"
+          frameBorder="0"
+          scrolling="no"
+          style={{ colorScheme: 'normal' }}
+        />
+      </div>
+
       <div className="flex flex-row gap-3">
         <SocialNetworks />
       </div>
diff --git a/packages/@intlayer/design-system/src/components/IDE/Code.tsx b/packages/@intlayer/design-system/src/components/IDE/Code.tsx
index f37cf7b983..587df786a1 100644
--- a/packages/@intlayer/design-system/src/components/IDE/Code.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/Code.tsx
@@ -200,7 +200,7 @@ export const Code: FC<CodeCompProps> = ({
     >
       <Container
         className={cn(
-          'relative min-w-0 max-w-full text-sm leading-6',
+          'relative min-w-0 max-w-full border text-sm leading-6',
           showLineNumbers && 'with-line-number ml-0',
           className
         )}
@@ -209,7 +209,7 @@ export const Code: FC<CodeCompProps> = ({
       >
         {showHeader && (
           <>
-            <div className="grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl bg-card/50 py-1.5 pr-12 pl-4 text-neutral text-xs">
+            <div className="grid w-full grid-cols-[1fr_auto] items-center justify-between rounded-t-xl border-b bg-card/50 py-1.5 pr-12 pl-4 text-muted-foreground text-xs">
               <span className="truncate">{displayedFileName ?? language}</span>
               <div className="flex items-center gap-2">
                 {packageManager && <PackageManagerSelector />}
diff --git a/packages/@intlayer/design-system/src/components/IDE/FileList.tsx b/packages/@intlayer/design-system/src/components/IDE/FileList.tsx
index 7a19ef192f..ac14a40123 100644
--- a/packages/@intlayer/design-system/src/components/IDE/FileList.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/FileList.tsx
@@ -13,7 +13,7 @@ export const FileList: FC<FileListProps> = ({ filePaths, ...props }) => (
     transparency="none"
     {...props}
   >
-    <div className="flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-neutral text-xs dark:bg-neutral-950">
+    <div className="flex w-auto flex-row items-center justify-start gap-1 rounded-t-3xl bg-neutral-200 text-muted-foreground text-xs dark:bg-neutral-950">
       <div className="mx-2 flex items-center justify-start gap-2 p-1">
         <div className="size-3 rounded-full bg-error" />
         <div className="size-3 rounded-full bg-yellow-500" />
diff --git a/packages/@intlayer/design-system/src/components/Input/Checkbox.tsx b/packages/@intlayer/design-system/src/components/Input/Checkbox.tsx
index af5564dba7..335169c01a 100644
--- a/packages/@intlayer/design-system/src/components/Input/Checkbox.tsx
+++ b/packages/@intlayer/design-system/src/components/Input/Checkbox.tsx
@@ -47,7 +47,7 @@ export const checkboxVariants = cva(
         secondary:
           'border-secondary/30 text-secondary ring-secondary/20 checked:border-secondary checked:bg-secondary',
         neutral:
-          'border-neutral/30 text-neutral ring-neutral/20 checked:border-neutral checked:bg-neutral',
+          'border-neutral/30 text-muted-foreground ring-neutral/20 checked:border-neutral checked:bg-neutral',
         light:
           'border-white/30 text-white ring-white/20 checked:border-white checked:bg-white',
         text: 'border-text/30 text-foreground ring-text/20 checked:border-text checked:bg-text',
diff --git a/packages/@intlayer/design-system/src/components/Link/Link.tsx b/packages/@intlayer/design-system/src/components/Link/Link.tsx
index ec56fa81ef..545af8a419 100644
--- a/packages/@intlayer/design-system/src/components/Link/Link.tsx
+++ b/packages/@intlayer/design-system/src/components/Link/Link.tsx
@@ -170,7 +170,7 @@ export const linkVariants = cva(
       {
         variant: 'button-outlined',
         color: 'neutral',
-        class: 'border-neutral text-neutral hover:bg-neutral/10',
+        class: 'border-neutral text-muted-foreground hover:bg-neutral/10',
       },
       {
         variant: 'button-outlined',
diff --git a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownIframe.tsx b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownIframe.tsx
index 22b51f1ed9..16dadeb202 100644
--- a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownIframe.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownIframe.tsx
@@ -206,7 +206,7 @@ export const MarkDownIframe: FC<ComponentProps<'iframe'>> = (props) => {
             rel="noopener noreferrer"
             label=""
             color="neutral"
-            className="inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-neutral text-xs underline-offset-2 hover:text-foreground hover:underline"
+            className="inline-flex min-w-0 max-w-[calc(100%-3rem)] items-center gap-2 text-muted-foreground text-xs underline-offset-2 hover:text-foreground hover:underline"
           >
             {label}
           </Link>
diff --git a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
index 207b94ecc9..e7ff43a860 100644
--- a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
@@ -102,7 +102,7 @@ const BlockquoteRenderer = ({
 }: ComponentProps<'blockquote'>) => (
   <blockquote
     className={cn(
-      'mt-5 gap-3 border-card border-l-4 pl-5 text-neutral [&_strong]:text-neutral',
+      'mt-5 gap-3 border-card border-l-4 pl-5 text-muted-foreground [&_strong]:text-neutral',
       className
     )}
     {...props}
diff --git a/packages/@intlayer/design-system/src/components/Modal/Modal.tsx b/packages/@intlayer/design-system/src/components/Modal/Modal.tsx
index 2599f5365d..498403aefa 100644
--- a/packages/@intlayer/design-system/src/components/Modal/Modal.tsx
+++ b/packages/@intlayer/design-system/src/components/Modal/Modal.tsx
@@ -211,7 +211,6 @@ export const Modal: FC<ModalProps> = ({
         className={modalVariants({ size, className })}
         role="dialog"
         aria-modal
-        roundedSize="4xl"
         // Force the outer container to have no padding so scrollbars hit the edge
         padding="none"
         {...props}
diff --git a/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx b/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
index bfd5444a88..e5a9138358 100644
--- a/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
+++ b/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
@@ -99,7 +99,7 @@ export const DesktopNavbar = <T extends TabSelectorItemProps>({
 
     <TabSelector
       selectedChoice={selectedChoice}
-      className="ml-[2vw] h-auto gap-3 overflow-x-auto text-neutral tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6"
+      className="ml-[2vw] h-auto gap-3 overflow-x-auto text-muted-foreground tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6"
       tabs={sections}
       hoverable
       color="text"
diff --git a/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.tsx b/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.tsx
index 5c91eb051c..a81eb2d09a 100644
--- a/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.tsx
+++ b/packages/@intlayer/design-system/src/components/RightDrawer/RightDrawer.tsx
@@ -261,7 +261,7 @@ export const RightDrawer: FC<RightDrawerProps> = ({
 
                   <Popover.Detail identifier="close-drawer">
                     <div className="flex items-center gap-2 p-2">
-                      <span className="whitespace-nowrap text-neutral text-xs">
+                      <span className="whitespace-nowrap text-muted-foreground text-xs">
                         {content.closeDrawer}
                       </span>
                       <KeyboardShortcut
diff --git a/packages/@intlayer/design-system/src/components/Table/SmartTable.tsx b/packages/@intlayer/design-system/src/components/Table/SmartTable.tsx
index 39f3727201..d542e4a5ef 100644
--- a/packages/@intlayer/design-system/src/components/Table/SmartTable.tsx
+++ b/packages/@intlayer/design-system/src/components/Table/SmartTable.tsx
@@ -185,7 +185,7 @@ export const SmartTable: FC<SmartTableProps> = ({
       if (row) {
         row.scrollIntoView({ behavior: 'smooth', block: 'center' });
 
-        row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');
+        row.classList.add('bg-card');
         row.style.transition = 'background-color 0.3s ease-in-out';
       }
     }
@@ -216,7 +216,7 @@ export const SmartTable: FC<SmartTableProps> = ({
 
       <ExpandCollapse
         isRollable={isRollable}
-        className="max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl"
+        className="max-w-full overflow-x-auto bg-background text-left"
       >
         <Table
           ref={tableRef}
diff --git a/packages/@intlayer/design-system/src/components/Table/Table.tsx b/packages/@intlayer/design-system/src/components/Table/Table.tsx
index 1157b4cfa0..6cf306803c 100644
--- a/packages/@intlayer/design-system/src/components/Table/Table.tsx
+++ b/packages/@intlayer/design-system/src/components/Table/Table.tsx
@@ -11,7 +11,16 @@ export const Table = forwardRef<HTMLTableElement, TableProps>(
     <table
       ref={ref}
       className={cn(
-        'w-full table-auto overflow-hidden text-left text-sm',
+        'w-full table-auto border-separate border-spacing-0 overflow-hidden rounded-2xl text-left text-sm',
+        '[&_thead_tr:first-child_th:first-child]:rounded-tl-2xl',
+        '[&_thead_tr:first-child_th:last-child]:rounded-tr-2xl',
+        '[&_tbody_tr:last-child_td:first-child]:rounded-bl-2xl',
+        '[&_tbody_tr:last-child_td:last-child]:rounded-br-2xl',
+        'supports-[corner-shape:squircle]:rounded-3xl',
+        'supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:first-child]:rounded-tl-3xl',
+        'supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:last-child]:rounded-tr-3xl',
+        'supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:first-child]:rounded-bl-3xl',
+        'supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:last-child]:rounded-br-3xl',
         isInteractive &&
           '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',
         className
diff --git a/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx b/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
index 19390353c3..c688ad7cd5 100644
--- a/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
+++ b/packages/@intlayer/design-system/src/components/Terminal/Terminal.tsx
@@ -117,7 +117,7 @@ export const Terminal: FC<TerminalProps> = ({
       {...containerProps}
     >
       {/* Tab bar */}
-      <div className="flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-neutral text-xs dark:bg-neutral-950">
+      <div className="flex w-full flex-row items-center justify-start gap-1 bg-neutral-200 text-muted-foreground text-xs dark:bg-neutral-950">
         <div className="mx-2 flex items-center justify-start gap-2 p-1">
           <div className="size-3 rounded-full bg-error" />
           <div className="size-3 rounded-full bg-yellow-500" />

From 85fd9acb996e2df6fae9d8b44f0819042cdf178b Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Wed, 26 Aug 2026 23:18:25 +0200
Subject: [PATCH 15/32] refactor(website): align app folder structure


From bc2a6617528ed7d768c060c45b251c1f4723572d Mon Sep 17 00:00:00 2001
From: aymericzip <ay.pineau@gmail.com>
Date: Wed, 26 Aug 2026 16:10:56 -0600
Subject: [PATCH 16/32] feat(website): add static pages plugin with optional
 prerendering control

---
 apps/website/.env.template  |  2 ++
 apps/website/vite.config.ts | 51 ++++++++++++++++++++++---------------
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/apps/website/.env.template b/apps/website/.env.template
index e296946a08..197e71af7f 100644
--- a/apps/website/.env.template
+++ b/apps/website/.env.template
@@ -15,6 +15,8 @@ VITE_BACKEND_URL=https://back.intlayer.org
 
 VITE_ENABLE_SERVICE_WORKER=false
 
+DISABLE_OPTIMIZATION=false
+
 #######################################################################################
 # PostHog                                                                             #
 #######################################################################################
diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts
index 1ce9435210..7f35906cf5 100644
--- a/apps/website/vite.config.ts
+++ b/apps/website/vite.config.ts
@@ -103,7 +103,11 @@ const MD_REWRITE_PATTERN =
  */
 let viteCommand: 'build' | 'serve' | undefined;
 
-const staticPagesPlugin = {
+type StaticPagesPluginOptions = {
+  disabled?: boolean;
+};
+
+const staticPagesPlugin = (options?: StaticPagesPluginOptions) => ({
   name: 'static-prerendered-pages',
   configResolved(config: { command: 'build' | 'serve' }) {
     viteCommand = config.command;
@@ -123,6 +127,7 @@ const staticPagesPlugin = {
     async handler(this: {
       environment?: { name?: string; config?: { build?: { outDir?: string } } };
     }) {
+      if (options?.disabled) return;
       if (viteCommand !== 'build') return;
 
       const environment = this.environment;
@@ -147,7 +152,7 @@ const staticPagesPlugin = {
     }) {
       // In dev there is no prerender output to serve, and Vite owns the
       // request pipeline anyway.
-      if (nitro.options.dev) return;
+      if (nitro.options.dev || options?.disabled) return;
 
       nitro.options.handlers.push({
         route: '/**',
@@ -156,7 +161,7 @@ const staticPagesPlugin = {
       });
     },
   },
-};
+});
 
 /**
  * Same rewrite, driven by content negotiation instead of a `.md` suffix, so a
@@ -251,20 +256,26 @@ const mdRawRewritePlugin = {
 };
 
 export default defineConfig(async ({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), 'VITE_');
-
-  const dynamicPaths = await buildDynamicPrerenderPaths();
-  const allPrerenderPaths = [...staticPrerenderPaths, ...dynamicPaths];
-  // `getLocalizedUrl` rather than a bare prefix: where `routing.rewrite` gives a
-  // locale its own pretty URL, that URL is the one visitors and crawlers reach
-  // (the proxy redirects the canonical one to it) and the one `staticPages.ts`
-  // looks up on disk. Prerendering the canonical path would bake a redirect.
-  const localizedPages = localeFlatMap(({ locale }) =>
-    allPrerenderPaths.map((path) => ({
-      path: getLocalizedUrl(path, locale),
-      prerender: { enabled: true },
-    }))
-  );
+  const env = loadEnv(mode, process.cwd(), '');
+
+  const isPrerenderDisabled =
+    env.DISABLE_OPTIMIZATION === 'true' ||
+    process.env.DISABLE_OPTIMIZATION === 'true';
+
+  const dynamicPaths = isPrerenderDisabled
+    ? []
+    : await buildDynamicPrerenderPaths();
+  const allPrerenderPaths = isPrerenderDisabled
+    ? []
+    : [...staticPrerenderPaths, ...dynamicPaths];
+  const localizedPages = isPrerenderDisabled
+    ? []
+    : localeFlatMap(({ urlPrefix }) =>
+        allPrerenderPaths.map((path) => ({
+          path: `${urlPrefix}${path}`,
+          prerender: { enabled: true },
+        }))
+      );
 
   const domain = env.VITE_PUBLIC_DOMAIN;
   const backendUrl = env.VITE_BACKEND_URL;
@@ -460,7 +471,7 @@ export default defineConfig(async ({ mode }) => {
         },
       }),
       intlayer(),
-      staticPagesPlugin,
+      staticPagesPlugin({ disabled: isPrerenderDisabled }),
       tailwindcss(),
       tanstackStart({
         router: {
@@ -468,12 +479,12 @@ export default defineConfig(async ({ mode }) => {
             '.content.(ts|tsx|js|mjs|cjs|jsx|json|jsonc|json5|md|mdx|yaml|yml)$',
         },
         prerender: {
-          enabled: true,
+          enabled: !isPrerenderDisabled,
           crawlLinks: false,
           concurrency: 8,
           // filter: ({ path }) => !PACKAGE_DOC_PATH_PATTERN.test(path),
         },
-        pages: localizedPages,
+        pages: isPrerenderDisabled ? [] : localizedPages,
       }),
       react(),
       babel({ presets: [reactCompilerPreset()] }),

From 1ef02745cf004ebdd08e3d1e2eaae7713a040768 Mon Sep 17 00:00:00 2001
From: aymericzip <ay.pineau@gmail.com>
Date: Wed, 26 Aug 2026 16:19:19 -0600
Subject: [PATCH 17/32] style(website): fix background color class in
 IDESection component

---
 .../components/LandingPage/NEW/IDESection/index.tsx   | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx b/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
index 4b8b0699b6..7630c4783a 100644
--- a/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
+++ b/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
@@ -1,9 +1,6 @@
 import { IDE } from '@intlayer/design-system/ide';
-import { SwitchSelector } from '@intlayer/design-system/switch-selector';
-import { useTheme } from 'next-themes';
-import { type FC, useState } from 'react';
-import { type Framework, Mode, useFramework } from '../FrameworkContext';
-import { FrameworkSelector } from '../FrameworkSelector';
+import type { FC } from 'react';
+import { type Framework, useFramework } from '../FrameworkContext';
 import clientComponent from './content/client-component.md';
 import clientComponentI18nEn from './content/client-component-i18n-en.md';
 import clientComponentI18nEs from './content/client-component-i18n-es.md';
@@ -153,7 +150,6 @@ const getCentralizedTabs = (framework: Framework) => {
 };
 
 export const IDESection: FC = () => {
-  const { resolvedTheme } = useTheme();
   const { framework, mode } = useFramework();
 
   const tabs =
@@ -164,10 +160,9 @@ export const IDESection: FC = () => {
   return (
     <div className="flex min-h-90 flex-col items-center justify-center gap-3">
       <IDE
-        isDarkMode={resolvedTheme === 'dark'}
         pages={tabs}
         activeTab={0}
-        className="m-0! mx-auto flex-1 p-0! text-xs [&>pre:bg-back]:bg-background"
+        className="m-0! mx-auto flex-1 p-0! text-xs [&>pre:bg-black]:bg-background"
         key={`${mode}-${framework}`}
       />
     </div>

From 68f653dc0efb3e176ad1a055cb8e02d82a81a485 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <88395415+tornado-softwares@users.noreply.github.com>
Date: Thu, 27 Aug 2026 00:24:28 +0200
Subject: [PATCH 18/32] Update comment text color in BlogCommentSection

---
 apps/website/src/components/BlogPage/BlogCommentSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/website/src/components/BlogPage/BlogCommentSection.tsx b/apps/website/src/components/BlogPage/BlogCommentSection.tsx
index bdf9b41615..e198896a9d 100644
--- a/apps/website/src/components/BlogPage/BlogCommentSection.tsx
+++ b/apps/website/src/components/BlogPage/BlogCommentSection.tsx
@@ -228,7 +228,7 @@ export const BlogCommentSection: FC<BlogCommentSectionProps> = ({
                     {formatDate(comment.createdAt)}
                   </time>
                 </div>
-                <p className="whitespace-pre-wrap text-foreground-secondary text-sm">
+                <p className="whitespace-pre-wrap text-foreground text-sm">
                   {comment.content}
                 </p>
               </Container>

From b9221ddfff55233abcc2c62d7c50f574602818b2 Mon Sep 17 00:00:00 2001
From: aymericzip <ay.pineau@gmail.com>
Date: Wed, 26 Aug 2026 16:24:58 -0600
Subject: [PATCH 19/32] fix(website): conditionally execute compression and
 inlining based on optimization flag

---
 apps/website/scripts/compress-static.ts     |  4 +++-
 apps/website/scripts/inline-critical-css.ts | 14 ++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/apps/website/scripts/compress-static.ts b/apps/website/scripts/compress-static.ts
index 43cd714292..48ef01d5d5 100644
--- a/apps/website/scripts/compress-static.ts
+++ b/apps/website/scripts/compress-static.ts
@@ -347,5 +347,7 @@ export const compressDirectory = async (
  * `compressDirectory`.
  */
 if (import.meta.main) {
-  await compressDirectory(PUBLIC_DIRECTORY, 'prerendered output');
+  if (process.env.DISABLE_OPTIMIZATION !== 'true') {
+    await compressDirectory(PUBLIC_DIRECTORY, 'prerendered output');
+  }
 }
diff --git a/apps/website/scripts/inline-critical-css.ts b/apps/website/scripts/inline-critical-css.ts
index 5d7568fd0e..0ff7b0266c 100644
--- a/apps/website/scripts/inline-critical-css.ts
+++ b/apps/website/scripts/inline-critical-css.ts
@@ -244,17 +244,15 @@ const inlineCriticalCss = async (): Promise<void> => {
   try {
     allFiles = await listFilesRecursively(PUBLIC_DIRECTORY);
   } catch {
-    console.error(
-      `   ✗ ${relative(process.cwd(), PUBLIC_DIRECTORY)} not found — nothing inlined.`
+    console.log(
+      `   ℹ ${relative(process.cwd(), PUBLIC_DIRECTORY)} not found — skipping inlining.`
     );
-    process.exitCode = 1;
     return;
   }
 
   const pages = allFiles.filter((file) => file.endsWith('.html'));
   if (pages.length === 0) {
-    console.error('   ✗ No prerendered pages found — nothing inlined.');
-    process.exitCode = 1;
+    console.log('   ℹ No prerendered pages found — skipping inlining.');
     return;
   }
 
@@ -318,4 +316,8 @@ const inlineCriticalCss = async (): Promise<void> => {
  * Importing this file (from the test) only pulls in `inlineStylesheetLinks`;
  * running it directly is the `postbuild` pass over the whole output.
  */
-if (import.meta.main) await inlineCriticalCss();
+if (import.meta.main) {
+  if (process.env.DISABLE_OPTIMIZATION !== 'true') {
+    await inlineCriticalCss();
+  }
+}

From d4ab761882a302804f8af17dc932fa4e536e7d68 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Thu, 27 Aug 2026 00:55:19 +0200
Subject: [PATCH 20/32] refactor(website): renamed components and some classes
 according to the PR review

---
 .../src/components/BlogPage/RelatedPosts.tsx  |   4 +-
 .../CMSLandingPage/FinalCTASection.tsx        |   2 +-
 .../src/components/ChatBot/ChatBumble.tsx     |   2 +-
 .../CompilerSection/Visual.tsx                |   0
 .../content/component-angular.md              |   0
 .../content/component-content.md              |   0
 .../CompilerSection/content/component-lit.md  |   0
 .../content/component-preact.md               |   0
 .../content/component-react.md                |   0
 .../content/component-solid.md                |   0
 .../content/component-svelte.md               |   0
 .../content/component-vanilla.md              |   0
 .../CompilerSection/content/component-vue.md  |   0
 .../CompilerSection/content/config-file.md    |   0
 .../CompilerSection/content/vite-config.md    |   0
 .../CompilerSection/demo.content.ts           |   0
 .../CompilerSection/index.tsx                 |   2 +-
 .../FrameworkContext.tsx                      |   0
 .../FrameworkSelector.tsx                     |   0
 .../content/client-component-i18n-en.md       |   0
 .../content/client-component-i18n-es.md       |   0
 .../content/client-component-i18n-fr.md       |   0
 .../IDESection/content/client-component.md    |   0
 .../IDESection/content/client-content.md      |   0
 .../IDESection/content/component-angular.md   |   0
 .../IDESection/content/component-lit.md       |   0
 .../content/component-next-client.md          |   0
 .../content/component-next-server.md          |   0
 .../IDESection/content/component-preact.md    |   0
 .../IDESection/content/component-react.md     |   0
 .../IDESection/content/component-solid.md     |   0
 .../IDESection/content/component-svelte.md    |   0
 .../IDESection/content/component-vanilla.md   |   0
 .../IDESection/content/component-vue.md       |   0
 .../content/config-file-centralized.md        |   0
 .../content/config-file-per-component.md      |   0
 .../content/server-component-i18n-en.md       |   0
 .../content/server-component-i18n-es.md       |   0
 .../content/server-component-i18n-fr.md       |   0
 .../IDESection/content/server-component.md    |   0
 .../IDESection/content/server-content.md      |   0
 .../IDESection/index.tsx                      |   0
 .../ModeSelector.tsx                          |   0
 .../RedesignedFeatures.tsx                    |   0
 .../TestSection/index.content.ts              |   0
 .../TestSection/index.tsx                     |   2 +-
 .../VisualEditorSection/index.content.ts      |   0
 .../VisualEditorSection/index.tsx             |   0
 .../LandingPage/HeroSection/index.tsx         |   2 +-
 .../TMSLandingPage/ComparisonSection.tsx      |   2 +-
 .../TMSLandingPage/FinalCTASection.tsx        |   2 +-
 .../TranslationLandingPage/CTASection.tsx     |   5 +-
 bun.lock                                      | 110 ++----------------
 53 files changed, 17 insertions(+), 116 deletions(-)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/Visual.tsx (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-angular.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-content.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-lit.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-preact.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-react.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-solid.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-svelte.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-vanilla.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/component-vue.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/config-file.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/content/vite-config.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/demo.content.ts (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/CompilerSection/index.tsx (98%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/FrameworkContext.tsx (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/FrameworkSelector.tsx (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/client-component-i18n-en.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/client-component-i18n-es.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/client-component-i18n-fr.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/client-component.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/client-content.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-angular.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-lit.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-next-client.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-next-server.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-preact.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-react.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-solid.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-svelte.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-vanilla.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/component-vue.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/config-file-centralized.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/config-file-per-component.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/server-component-i18n-en.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/server-component-i18n-es.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/server-component-i18n-fr.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/server-component.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/content/server-content.md (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/IDESection/index.tsx (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/ModeSelector.tsx (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/RedesignedFeatures.tsx (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/TestSection/index.content.ts (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/TestSection/index.tsx (96%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/VisualEditorSection/index.content.ts (100%)
 rename apps/website/src/components/LandingPage/{NEW => BentoFeaturesSection}/VisualEditorSection/index.tsx (100%)

diff --git a/apps/website/src/components/BlogPage/RelatedPosts.tsx b/apps/website/src/components/BlogPage/RelatedPosts.tsx
index 664ba50871..244a24dddb 100644
--- a/apps/website/src/components/BlogPage/RelatedPosts.tsx
+++ b/apps/website/src/components/BlogPage/RelatedPosts.tsx
@@ -93,7 +93,7 @@ export const RelatedPosts: FC<RelatedPostsProps> = ({
               label={content.visitBlogTitle({ title: post.title })}
               className="group flex flex-col gap-2.5 py-5 no-underline sm:px-5 last:sm:pr-0 first:sm:pl-0"
             >
-              <p className="line-clamp-2 font-medium text-foreground-primary text-sm transition-colors group-hover:text-foreground-secondary group-hover:underline">
+              <p className="line-clamp-2 font-medium text-foreground text-sm transition-colors group-hover:text-foreground-secondary group-hover:underline">
                 {post.title}
               </p>
               {post.description && (
@@ -161,7 +161,7 @@ export const LastPosts: FC<LastPostsProps> = ({
               label={content.visitBlogTitle({ title: post.title })}
               className="group flex flex-col gap-2.5 py-5 no-underline sm:px-5 last:sm:pr-0 first:sm:pl-0"
             >
-              <p className="line-clamp-2 font-medium text-foreground-primary text-sm transition-colors group-hover:text-foreground-secondary group-hover:underline">
+              <p className="line-clamp-2 font-medium text-foreground text-sm transition-colors group-hover:text-foreground-secondary group-hover:underline">
                 {post.title}
               </p>
               {post.description && (
diff --git a/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx b/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
index 75b70073e4..be871811eb 100644
--- a/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
+++ b/apps/website/src/components/CMSLandingPage/FinalCTASection.tsx
@@ -27,7 +27,7 @@ export const FinalCTASection: FC = () => {
 
       <div className="relative mx-auto max-w-4xl px-4 text-center md:px-8 lg:px-12">
         <motion.div {...fadeUp}>
-          <h2 className="mb-6 font-bold text-3xl text-foreground-opposite sm:text-4xl md:text-5xl">
+          <h2 className="mb-6 font-bold text-3xl text-foreground sm:text-4xl md:text-5xl">
             {finalCtaTitle}
           </h2>
           <p className="mx-auto mb-10 max-w-xl text-lg text-muted-foreground">
diff --git a/apps/website/src/components/ChatBot/ChatBumble.tsx b/apps/website/src/components/ChatBot/ChatBumble.tsx
index 0e31695b36..3425a49e03 100644
--- a/apps/website/src/components/ChatBot/ChatBumble.tsx
+++ b/apps/website/src/components/ChatBot/ChatBumble.tsx
@@ -21,7 +21,7 @@ export const ChatBumble: FC<ChatBumbleProps> = ({
     <div
       className={cn(
         type === ChatBumbleType.QUESTION &&
-          'mr-4 ml-auto w-auto max-w-[90%] whitespace-pre-wrap rounded-lg rounded-tr-none bg-text/95 px-8 py-2 text-foreground-opposite',
+          'mr-4 ml-auto w-auto max-w-[90%] whitespace-pre-wrap rounded-lg rounded-tr-none bg-text/95 px-8 py-2 text-foreground',
         type === ChatBumbleType.ANSWER && 'w-full px-4'
       )}
       {...props}
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/Visual.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/Visual.tsx
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/Visual.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/Visual.tsx
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-angular.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-angular.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-angular.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-angular.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-content.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-content.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-content.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-content.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-lit.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-lit.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-lit.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-lit.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-preact.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-preact.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-preact.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-preact.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-react.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-react.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-react.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-react.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-solid.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-solid.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-solid.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-solid.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-svelte.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-svelte.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-svelte.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-svelte.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vanilla.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-vanilla.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vanilla.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-vanilla.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vue.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-vue.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/component-vue.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/component-vue.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/config-file.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/config-file.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/config-file.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/config-file.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/content/vite-config.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/vite-config.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/content/vite-config.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/content/vite-config.md
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/demo.content.ts b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/demo.content.ts
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/demo.content.ts
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/demo.content.ts
diff --git a/apps/website/src/components/LandingPage/NEW/CompilerSection/index.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/index.tsx
similarity index 98%
rename from apps/website/src/components/LandingPage/NEW/CompilerSection/index.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/index.tsx
index 8b53a901d8..bda6df2757 100644
--- a/apps/website/src/components/LandingPage/NEW/CompilerSection/index.tsx
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/CompilerSection/index.tsx
@@ -1,7 +1,7 @@
 import { IDE } from '@intlayer/design-system/ide';
 import { WithResizer } from '@intlayer/design-system/with-resizer';
-import { useTheme } from 'next-themes';
 import type { FC } from 'react';
+import { useTheme } from '~/providers/ThemeProvider';
 import { type Framework, useFramework } from '../FrameworkContext';
 import { FrameworkSelector } from '../FrameworkSelector';
 import componentAngular from './content/component-angular.md';
diff --git a/apps/website/src/components/LandingPage/NEW/FrameworkContext.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/FrameworkContext.tsx
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/FrameworkContext.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/FrameworkContext.tsx
diff --git a/apps/website/src/components/LandingPage/NEW/FrameworkSelector.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/FrameworkSelector.tsx
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/FrameworkSelector.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/FrameworkSelector.tsx
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-en.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-en.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-en.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-en.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-es.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-es.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-es.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-es.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-fr.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-fr.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/client-component-i18n-fr.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-fr.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-component.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/client-component.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/client-content.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-content.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/client-content.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-content.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-angular.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-angular.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-angular.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-angular.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-lit.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-lit.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-lit.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-lit.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-client.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-next-client.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-client.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-next-client.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-server.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-next-server.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-next-server.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-next-server.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-preact.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-preact.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-preact.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-preact.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-react.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-react.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-react.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-react.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-solid.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-solid.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-solid.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-solid.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-svelte.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-svelte.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-svelte.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-svelte.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-vanilla.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-vanilla.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-vanilla.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-vanilla.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/component-vue.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-vue.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/component-vue.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/component-vue.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-centralized.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/config-file-centralized.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-centralized.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/config-file-centralized.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-per-component.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/config-file-per-component.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/config-file-per-component.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/config-file-per-component.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-en.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-en.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-en.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-en.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-es.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-es.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-es.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-es.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-fr.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-fr.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/server-component-i18n-fr.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-fr.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-component.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/server-component.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/content/server-content.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-content.md
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/content/server-content.md
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-content.md
diff --git a/apps/website/src/components/LandingPage/NEW/IDESection/index.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/index.tsx
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/IDESection/index.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/index.tsx
diff --git a/apps/website/src/components/LandingPage/NEW/ModeSelector.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/ModeSelector.tsx
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/ModeSelector.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/ModeSelector.tsx
diff --git a/apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/RedesignedFeatures.tsx
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/RedesignedFeatures.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/RedesignedFeatures.tsx
diff --git a/apps/website/src/components/LandingPage/NEW/TestSection/index.content.ts b/apps/website/src/components/LandingPage/BentoFeaturesSection/TestSection/index.content.ts
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/TestSection/index.content.ts
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/TestSection/index.content.ts
diff --git a/apps/website/src/components/LandingPage/NEW/TestSection/index.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/TestSection/index.tsx
similarity index 96%
rename from apps/website/src/components/LandingPage/NEW/TestSection/index.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/TestSection/index.tsx
index f97c369342..ce3166759e 100644
--- a/apps/website/src/components/LandingPage/NEW/TestSection/index.tsx
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/TestSection/index.tsx
@@ -1,7 +1,7 @@
 import { Terminal } from '@intlayer/design-system/terminal';
-import { useTheme } from 'next-themes';
 import { type FC, useEffect, useState } from 'react';
 import { type IntlayerNode, useIntlayer } from 'react-intlayer';
+import { useTheme } from '~/providers/ThemeProvider';
 
 export const TestSection: FC = () => {
   const content = useIntlayer('test-section');
diff --git a/apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.content.ts b/apps/website/src/components/LandingPage/BentoFeaturesSection/VisualEditorSection/index.content.ts
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.content.ts
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/VisualEditorSection/index.content.ts
diff --git a/apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/VisualEditorSection/index.tsx
similarity index 100%
rename from apps/website/src/components/LandingPage/NEW/VisualEditorSection/index.tsx
rename to apps/website/src/components/LandingPage/BentoFeaturesSection/VisualEditorSection/index.tsx
diff --git a/apps/website/src/components/LandingPage/HeroSection/index.tsx b/apps/website/src/components/LandingPage/HeroSection/index.tsx
index a005e733ac..3fbade27b7 100644
--- a/apps/website/src/components/LandingPage/HeroSection/index.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/index.tsx
@@ -17,11 +17,11 @@ import {
   ExternalLink,
   Megaphone,
 } from 'lucide-react';
-import { useTheme } from 'next-themes';
 import type { FC } from 'react';
 import { useIntlayer } from 'react-intlayer';
 import { BackgroundLayout } from '~/components/BackgroundLayout';
 import { Link } from '~/components/Link/Link';
+import { useTheme } from '~/providers/ThemeProvider';
 import packageJSON from '../../../../package_mock.json' with { type: 'json' };
 import { TechLogos } from './TechLogos';
 
diff --git a/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx b/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
index 940f9559c6..bf29297329 100644
--- a/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
+++ b/apps/website/src/components/TMSLandingPage/ComparisonSection.tsx
@@ -59,7 +59,7 @@ export const ComparisonSection: FC = () => {
 
                 {/* Intlayer Column */}
                 <div className="col-span-1 flex items-center gap-2 font-semibold text-foreground">
-                  <span className="flex size-6 items-center justify-center rounded-full bg-text text-foreground-opposite">
+                  <span className="flex size-6 items-center justify-center rounded-full bg-text text-foreground">
                     <Check className="size-3.5" strokeWidth={3} />
                   </span>
                   {row.intlayer}
diff --git a/apps/website/src/components/TMSLandingPage/FinalCTASection.tsx b/apps/website/src/components/TMSLandingPage/FinalCTASection.tsx
index a8219b8509..8d403eb8b0 100644
--- a/apps/website/src/components/TMSLandingPage/FinalCTASection.tsx
+++ b/apps/website/src/components/TMSLandingPage/FinalCTASection.tsx
@@ -24,7 +24,7 @@ export const FinalCTASection: FC = () => {
 
       <div className="relative mx-auto max-w-4xl px-4 text-center md:px-8 lg:px-12">
         <m.div {...fadeUp}>
-          <h2 className="mb-6 font-bold text-3xl text-foreground-opposite sm:text-4xl md:text-5xl">
+          <h2 className="mb-6 font-bold text-3xl text-foreground sm:text-4xl md:text-5xl">
             {finalCtaTitle}
           </h2>
           <p className="mx-auto mb-10 max-w-xl text-lg text-neutral-300">
diff --git a/apps/website/src/components/TranslationLandingPage/CTASection.tsx b/apps/website/src/components/TranslationLandingPage/CTASection.tsx
index e3c31cc001..32c6b8fbf3 100644
--- a/apps/website/src/components/TranslationLandingPage/CTASection.tsx
+++ b/apps/website/src/components/TranslationLandingPage/CTASection.tsx
@@ -24,10 +24,7 @@ const CodeBlockWrapper: FC<CodeBlockWrapperProps> = ({
       border
       borderColor="card"
       background="none"
-      className={cn(
-        'relative overflow-hidden text-foreground-opposite',
-        className
-      )}
+      className={cn('relative overflow-hidden text-foreground', className)}
     >
       <div className="mb-2 flex items-center justify-between">
         <span className="text-foreground/70 text-xs">{title}</span>
diff --git a/bun.lock b/bun.lock
index ea12c05024..ecf6e41435 100644
--- a/bun.lock
+++ b/bun.lock
@@ -4200,39 +4200,11 @@
 
     "@nestjs/testing": ["@nestjs/testing@11.1.6", "", { "dependencies": { "tslib": "2.8.1" }, "peerDependencies": { "@nestjs/common": "^11.0.0", "@nestjs/core": "^11.0.0", "@nestjs/microservices": "^11.0.0", "@nestjs/platform-express": "^11.0.0" }, "optionalPeers": ["@nestjs/microservices", "@nestjs/platform-express"] }, "sha512-srYzzDNxGvVCe1j0SpTS9/ix75PKt6Sn6iMaH1rpJ6nj2g8vwNrhK0CoJJXvpCYgrnI+2WES2pprYnq8rAMYHA=="],
 
-    "@next/bundle-analyzer": ["@next/bundle-analyzer@16.2.0", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-3F8T1KYVWKBLUXzZPpYSYp134c3iwzNDMxfOE0kkqST+S5VaYao41F0SQogd6E4Od7+C3ReA/XJMDDw9P61n6w=="],
+    "@next/bundle-analyzer": ["@next/bundle-analyzer@15.5.18", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-v5/UNFwYbBlRQg/Bt+wU65XuxCxPu1AeCOI6s4s6Cludsj7FdVO9E9uzr7GIj8OykSrYtGuEQAUX0Ulje8W2yw=="],
 
     "@next/env": ["@next/env@16.3.1", "", {}, "sha512-35G3xwkQUb2oETSDjFXGrVugknoayLFBh7vSE+yAcl9IP2zT9wyGwq7297AYHR11kJld807t5f8AJBs6WBzXsQ=="],
 
-    "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.2.6", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-Z8l6o4JWKUl755x4R+wogD86KPeU+Ckw4K+SYG4kHeOJtRenDeK+OSbGcqZpDtbwn9DsJVdir2UxmwXuinUbUw=="],
-
-    "@next/rspack-binding": ["@next/rspack-binding@1.0.3", "", { "optionalDependencies": { "@next/rspack-binding-android-arm-eabi": "1.0.3", "@next/rspack-binding-android-arm64": "1.0.3", "@next/rspack-binding-darwin-arm64": "1.0.3", "@next/rspack-binding-darwin-x64": "1.0.3", "@next/rspack-binding-linux-arm-gnueabihf": "1.0.3", "@next/rspack-binding-linux-arm64-gnu": "1.0.3", "@next/rspack-binding-linux-arm64-musl": "1.0.3", "@next/rspack-binding-linux-x64-gnu": "1.0.3", "@next/rspack-binding-linux-x64-musl": "1.0.3", "@next/rspack-binding-win32-arm64-msvc": "1.0.3", "@next/rspack-binding-win32-ia32-msvc": "1.0.3", "@next/rspack-binding-win32-x64-msvc": "1.0.3" } }, "sha512-y42fIcY2Fz0RKgMJt8R9c0Asrp09Evwkkd3RpWaWXhongFlP34IGcF6YuCkZESLywkkrgNalZT8hzYNeq0QYXw=="],
-
-    "@next/rspack-binding-android-arm-eabi": ["@next/rspack-binding-android-arm-eabi@1.0.3", "", { "os": "android", "cpu": "arm" }, "sha512-iyl9QipZl7osUbhi9GNRbZbzTQB//wvRXk6uwMSmRTYGdbSP8lKkZBjso9S5ijAubN1ulRIhe55kl8BzrmhlBA=="],
-
-    "@next/rspack-binding-android-arm64": ["@next/rspack-binding-android-arm64@1.0.3", "", { "os": "android", "cpu": "arm64" }, "sha512-VTHUVNHWbD2HwM/hxEqiiN/X1O/rMfWbDGM+2eL1V2w3H6r5KmKC6V4m/iZJwhknxgRVxQ4R205TCD34OLEfkA=="],
-
-    "@next/rspack-binding-darwin-arm64": ["@next/rspack-binding-darwin-arm64@1.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-i311ThFKKunMxSrYW6TEK+IRUzIvgyYUTkDuDF5+VTm6haoaX9XFyjkUT0lz/3g8LFJBnI20BJpsY6kNXQSb8Q=="],
-
-    "@next/rspack-binding-darwin-x64": ["@next/rspack-binding-darwin-x64@1.0.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-5JUKbG7i59lvaMUm/EYO/T9ukTcWg+daELvHJpnyeRQ3QOZO8lBG8V/qiY5cPUOtxU3D3U3nYfR4TNsAn2K0ew=="],
-
-    "@next/rspack-binding-linux-arm-gnueabihf": ["@next/rspack-binding-linux-arm-gnueabihf@1.0.3", "", { "os": "linux", "cpu": "arm" }, "sha512-CotyzAc/XMVBq/Ju0eeFqVJeLk5YgBf/qnY0pTiEIf/mqfr1/BWOkbnFtHt/SO6jzVSWIAC33iZ3TLfXn3bvyQ=="],
-
-    "@next/rspack-binding-linux-arm64-gnu": ["@next/rspack-binding-linux-arm64-gnu@1.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-jcXWBqE+usDtN4mxenWsfu9Krd7+lBaL977G1nx00M9PXQZX8M52V6TLTVpADIOUa6HfAhGCg0QPhIap8lG1gg=="],
-
-    "@next/rspack-binding-linux-arm64-musl": ["@next/rspack-binding-linux-arm64-musl@1.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-p8CvSpz1tP/kewuPfi513RBDdoWyInqK3d8tVWJbUzxhwjMEc95+4w+OzvEDMlioN5azq3l4mVCm/sWH0qBqOg=="],
-
-    "@next/rspack-binding-linux-x64-gnu": ["@next/rspack-binding-linux-x64-gnu@1.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SViZ7oKgR7Ps+SyhJ0WsQyLxTTw2m0SE2KiepadxmKOPmaich8hj5trUKHefXg5cBPJ5eKAtOozpCNpLD0JdRg=="],
-
-    "@next/rspack-binding-linux-x64-musl": ["@next/rspack-binding-linux-x64-musl@1.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-XEwJWAUhipCGFYb2m1bNZy8uR/rhrGTeezCkZ4qBR3CmZpuGkAS4BBJrMaROmo+hZ73xFNAO+iXLoEacISooqw=="],
-
-    "@next/rspack-binding-win32-arm64-msvc": ["@next/rspack-binding-win32-arm64-msvc@1.0.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-QR6VH6rf2uRmVoqJ3SCmTqdqMPFpXWfUDrpKTce4Ud9U/SpTRAcYkfeA1pIvypCU68vhgk+0/6vR6GPeN0aR7A=="],
-
-    "@next/rspack-binding-win32-ia32-msvc": ["@next/rspack-binding-win32-ia32-msvc@1.0.3", "", { "os": "win32", "cpu": "ia32" }, "sha512-ylVnRMayUex5kfe7nBo6mum6mSBhaTeCJnr9Carmi+7/3h03MXD8HRkWupfpsAYjkpQU+vskONgVvZ/9mNS4oA=="],
-
-    "@next/rspack-binding-win32-x64-msvc": ["@next/rspack-binding-win32-x64-msvc@1.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-fED9bUmsqRqtfQENWZhbnwTkWyWYL6oLoqM0IiASpzB4khBlxBlbPqFhXB5IJWzFHuYbLNfjuJh7SU9k8Rih2Q=="],
-
-    "@next/rspack-core": ["@next/rspack-core@1.0.3", "", { "dependencies": { "@next/rspack-binding": "1.0.3", "@rspack/core": "2.0.4" } }, "sha512-4EDUKhRIuljVhTDjy8DqGvTrWrZIFUHffdAThSB3OAEyCPm+pgM3JedSodm00Od5ox0PpsZ0nWY2sbwsJofg2A=="],
+    "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.3.0", "", { "dependencies": { "@eslint-community/eslint-utils": "4.9.1", "fast-glob": "3.3.1" } }, "sha512-OqgJ8PN0d04KcPhDX/PTY5tJUJZxlbrt7O7FBsm4XE0XW2JDrKnDXsc9uo9WUimJGPoo2j+JRGhyXApC//mvbw=="],
 
     "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ABMIu2zQ7cnNIHm5ivKGwZwUrm0pAai3yiJ/gK/rF1c1VP9UOnj7XECbMKFdVKp9I9eMYq9NoDs1WXOoowxzJw=="],
 
@@ -6890,7 +6862,7 @@
 
     "eslint": ["eslint@10.8.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.7.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.2", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.5", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-wqA7W2jbsC/BnV9Iv1UZpKVFkO1AdNoSmYW8NWG4HNOBbkAMvIqDZ27pI2f07dqn583NcIC44ckjAcOXDL1QbQ=="],
 
-    "eslint-config-next": ["eslint-config-next@16.2.6", "", { "dependencies": { "@next/eslint-plugin-next": "16.2.6", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-z2ELYSkyrrJ6cuunTU8vhsT/RpouPkjaSah06nVW6Rg2Hpg0Vs8s497/e5s8G8qtdp4ccsiovz5P1rv+5VSW2Q=="],
+    "eslint-config-next": ["eslint-config-next@16.3.0", "", { "dependencies": { "@next/eslint-plugin-next": "16.3.0", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-lPrf1kHsMJEZqO0uXkNB400c5MGrhrTk3BNX7P0ol4gt61+iUlQfjy9TyIOEA9eOXrf+5+mYbT/JsY8+zqUByQ=="],
 
     "eslint-config-react-app": ["eslint-config-react-app@7.0.1", "", { "dependencies": { "@babel/core": "^7.16.0", "@babel/eslint-parser": "^7.16.3", "@rushstack/eslint-patch": "^1.1.0", "@typescript-eslint/eslint-plugin": "^5.5.0", "@typescript-eslint/parser": "^5.5.0", "babel-preset-react-app": "^10.0.1", "confusing-browser-globals": "^1.0.11", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jest": "^25.3.0", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.27.1", "eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-testing-library": "^5.0.1" }, "peerDependencies": { "eslint": "^8.0.0" } }, "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA=="],
 
@@ -7446,8 +7418,6 @@
 
     "intlayer-editor": ["intlayer-editor@workspace:packages/intlayer-editor"],
 
-    "intlayer-next-16": ["intlayer-next-16@workspace:examples/nextjs-16-app"],
-
     "intlayer-next-no-lolale-path": ["intlayer-next-no-lolale-path@workspace:examples/next-no-lolale-path"],
 
     "intlayer-nuxt-4": ["intlayer-nuxt-4@workspace:examples/nuxt-4-app"],
@@ -8236,8 +8206,6 @@
 
     "next-intlayer": ["next-intlayer@workspace:packages/next-intlayer"],
 
-    "next-rspack": ["next-rspack@16.3.0", "", { "dependencies": { "@next/rspack-core": "1.0.3" } }, "sha512-VGTrFDuQNXD8clu+i3uhT6lIKDvsQ3tSp2Q5Q/W71EfH0pidZmAsxtwT6EOfOWlQU6AyEEk/UmtGytvzCQCvbQ=="],
-
     "nextjs-15-app": ["nextjs-15-app@workspace:examples/nextjs-15-app"],
 
     "nextjs-app-14-example": ["nextjs-app-14-example@workspace:examples/nextjs-14-app"],
@@ -8354,6 +8322,8 @@
 
     "ofetch": ["ofetch@2.0.0-alpha.3", "", {}, "sha512-zpYTCs2byOuft65vI3z43Dd6iSdFbOZZLb9/d21aCpx2rGastVU9dOCv0lu4ykc1Ur1anAYjDi3SUvR0vq50JA=="],
 
+    "ogl": ["ogl@1.0.11", "", {}, "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA=="],
+
     "ohash": ["ohash@1.1.6", "", {}, "sha512-TBu7PtV8YkAZn0tSxobKY2n2aAQva936lhRrj6957aDaCf9IEtqsKbgMzXE/F/sjqYOwmrukeORHNLe5glk7Cg=="],
 
     "on-change": ["on-change@6.0.2", "", {}, "sha512-08+12qcOVEA0fS9g/VxKS27HaT94nRutUT77J2dr8zv/unzXopvhBuF8tNLWsoLQ5IgrQ6eptGeGqUYat82U1w=="],
@@ -11100,8 +11070,6 @@
 
     "@next/eslint-plugin-next/fast-glob": ["fast-glob@3.3.1", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg=="],
 
-    "@next/rspack-core/@rspack/core": ["@rspack/core@2.0.4", "", { "dependencies": { "@rspack/binding": "2.0.4" }, "peerDependencies": { "@module-federation/runtime-tools": "^0.24.1 || ^2.0.0", "@swc/helpers": ">=0.5.1" }, "optionalPeers": ["@module-federation/runtime-tools", "@swc/helpers"] }, "sha512-OuxdQeeKWQpNvFBRDOcnoSaQvp6E4APM/6JJMM/k0p6oL1TEFQVGdNu3VGY4mRAsebnNBXapMVMhj+v66Bn2pg=="],
-
     "@ngtools/webpack/@angular/compiler-cli": ["@angular/compiler-cli@19.2.25", "", { "dependencies": { "@babel/core": "7.26.9", "@jridgewell/sourcemap-codec": "^1.4.14", "chokidar": "^4.0.0", "convert-source-map": "^1.5.1", "reflect-metadata": "^0.2.0", "semver": "^7.0.0", "tslib": "^2.3.0", "yargs": "^17.2.1" }, "peerDependencies": { "@angular/compiler": "19.2.25", "typescript": ">=5.5 <5.9" }, "bin": { "ngc": "bundles/src/bin/ngc.js", "ngcc": "bundles/ngcc/index.js", "ng-xi18n": "bundles/src/bin/ng_xi18n.js" } }, "sha512-IBBKRz6ua+y6bdcaUIpOPq7G/S4biJfcT1TCMD7wi+48wiKKSXj4J/8BN5fSjt+UozlHwya3B8z0XqnwO2ywZw=="],
 
     "@npmcli/git/npm-pick-manifest": ["npm-pick-manifest@11.0.3", "", { "dependencies": { "npm-install-checks": "^8.0.0", "npm-normalize-package-bin": "^5.0.0", "npm-package-arg": "^13.0.0", "semver": "^7.3.5" } }, "sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ=="],
@@ -12130,10 +12098,6 @@
 
     "intlayer-editor/typescript": ["typescript@7.0.2", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.2", "@typescript/typescript-darwin-arm64": "7.0.2", "@typescript/typescript-darwin-x64": "7.0.2", "@typescript/typescript-freebsd-arm64": "7.0.2", "@typescript/typescript-freebsd-x64": "7.0.2", "@typescript/typescript-linux-arm": "7.0.2", "@typescript/typescript-linux-arm64": "7.0.2", "@typescript/typescript-linux-loong64": "7.0.2", "@typescript/typescript-linux-mips64el": "7.0.2", "@typescript/typescript-linux-ppc64": "7.0.2", "@typescript/typescript-linux-riscv64": "7.0.2", "@typescript/typescript-linux-s390x": "7.0.2", "@typescript/typescript-linux-x64": "7.0.2", "@typescript/typescript-netbsd-arm64": "7.0.2", "@typescript/typescript-netbsd-x64": "7.0.2", "@typescript/typescript-openbsd-arm64": "7.0.2", "@typescript/typescript-openbsd-x64": "7.0.2", "@typescript/typescript-sunos-x64": "7.0.2", "@typescript/typescript-win32-arm64": "7.0.2", "@typescript/typescript-win32-x64": "7.0.2" }, "bin": { "tsc": "bin/tsc" } }, "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA=="],
 
-    "intlayer-next-16/next": ["next@16.3.0", "", { "dependencies": { "@next/env": "16.3.0", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.5.23", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.3.0", "@next/swc-darwin-x64": "16.3.0", "@next/swc-linux-arm64-gnu": "16.3.0", "@next/swc-linux-arm64-musl": "16.3.0", "@next/swc-linux-x64-gnu": "16.3.0", "@next/swc-linux-x64-musl": "16.3.0", "@next/swc-win32-arm64-msvc": "16.3.0", "@next/swc-win32-x64-msvc": "16.3.0", "sharp": "^0.35.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-NEdGOzH+08eTXMUp9UYkA99Nhi5N6Thrhc1jgFOQgfgnGK/dA2hRwBpXep+exdFQrnwlRf/3Wixyp8lLBUpE2A=="],
-
-    "intlayer-next-no-lolale-path/eslint-config-next": ["eslint-config-next@16.3.0", "", { "dependencies": { "@next/eslint-plugin-next": "16.3.0", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-lPrf1kHsMJEZqO0uXkNB400c5MGrhrTk3BNX7P0ol4gt61+iUlQfjy9TyIOEA9eOXrf+5+mYbT/JsY8+zqUByQ=="],
-
     "intlayer-next-no-lolale-path/next": ["next@16.3.0", "", { "dependencies": { "@next/env": "16.3.0", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.5.23", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.3.0", "@next/swc-darwin-x64": "16.3.0", "@next/swc-linux-arm64-gnu": "16.3.0", "@next/swc-linux-arm64-musl": "16.3.0", "@next/swc-linux-x64-gnu": "16.3.0", "@next/swc-linux-x64-musl": "16.3.0", "@next/swc-win32-arm64-msvc": "16.3.0", "@next/swc-win32-x64-msvc": "16.3.0", "sharp": "^0.35.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-NEdGOzH+08eTXMUp9UYkA99Nhi5N6Thrhc1jgFOQgfgnGK/dA2hRwBpXep+exdFQrnwlRf/3Wixyp8lLBUpE2A=="],
 
     "intlayer-nuxt-4/vue": ["vue@3.5.38", "", { "dependencies": { "@vue/compiler-dom": "3.5.38", "@vue/compiler-sfc": "3.5.38", "@vue/runtime-dom": "3.5.38", "@vue/server-renderer": "3.5.38", "@vue/shared": "3.5.38" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-vAMKHfImQlYSy0C+PBue4s3ERZ2xGKfgZg5GXAsLInq1dyh2H78ILVP5sK0KPFPVW4kv+OGCIvBEondcjpZp7A=="],
@@ -12590,8 +12554,6 @@
 
     "next-intlayer/typescript": ["typescript@7.0.2", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.2", "@typescript/typescript-darwin-arm64": "7.0.2", "@typescript/typescript-darwin-x64": "7.0.2", "@typescript/typescript-freebsd-arm64": "7.0.2", "@typescript/typescript-freebsd-x64": "7.0.2", "@typescript/typescript-linux-arm": "7.0.2", "@typescript/typescript-linux-arm64": "7.0.2", "@typescript/typescript-linux-loong64": "7.0.2", "@typescript/typescript-linux-mips64el": "7.0.2", "@typescript/typescript-linux-ppc64": "7.0.2", "@typescript/typescript-linux-riscv64": "7.0.2", "@typescript/typescript-linux-s390x": "7.0.2", "@typescript/typescript-linux-x64": "7.0.2", "@typescript/typescript-netbsd-arm64": "7.0.2", "@typescript/typescript-netbsd-x64": "7.0.2", "@typescript/typescript-openbsd-arm64": "7.0.2", "@typescript/typescript-openbsd-x64": "7.0.2", "@typescript/typescript-sunos-x64": "7.0.2", "@typescript/typescript-win32-arm64": "7.0.2", "@typescript/typescript-win32-x64": "7.0.2" }, "bin": { "tsc": "bin/tsc" } }, "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA=="],
 
-    "nextjs-15-app/@next/bundle-analyzer": ["@next/bundle-analyzer@15.5.18", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-v5/UNFwYbBlRQg/Bt+wU65XuxCxPu1AeCOI6s4s6Cludsj7FdVO9E9uzr7GIj8OykSrYtGuEQAUX0Ulje8W2yw=="],
-
     "nextjs-15-app/next": ["next@15.5.18", "", { "dependencies": { "@next/env": "15.5.18", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.18", "@next/swc-darwin-x64": "15.5.18", "@next/swc-linux-arm64-gnu": "15.5.18", "@next/swc-linux-arm64-musl": "15.5.18", "@next/swc-linux-x64-gnu": "15.5.18", "@next/swc-linux-x64-musl": "15.5.18", "@next/swc-win32-arm64-msvc": "15.5.18", "@next/swc-win32-x64-msvc": "15.5.18", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-eKL8zUJkX9Y5lE+RX/2YJoItVdGlIscyVyboeD9wSpp0PaGqjoA4tTpT2qPqz9ax+5IzGESyLSeZ/RCwbSZ2uQ=="],
 
     "nextjs-app-14-example/@types/node": ["@types/node@25.8.0", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-TCFSk8IZh+iLX1xtksoBVtdmgL+1IX0fC9BeU4QqFSuNdN/K+HUlhqOzEmSYYpZUVsLYcPqc9KX+60iDuninSQ=="],
@@ -16248,8 +16210,6 @@
 
     "@nestjs/schematics/@angular-devkit/schematics/rxjs": ["rxjs@7.8.1", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg=="],
 
-    "@next/rspack-core/@rspack/core/@rspack/binding": ["@rspack/binding@2.0.4", "", { "optionalDependencies": { "@rspack/binding-darwin-arm64": "2.0.4", "@rspack/binding-darwin-x64": "2.0.4", "@rspack/binding-linux-arm64-gnu": "2.0.4", "@rspack/binding-linux-arm64-musl": "2.0.4", "@rspack/binding-linux-x64-gnu": "2.0.4", "@rspack/binding-linux-x64-musl": "2.0.4", "@rspack/binding-wasm32-wasi": "2.0.4", "@rspack/binding-win32-arm64-msvc": "2.0.4", "@rspack/binding-win32-ia32-msvc": "2.0.4", "@rspack/binding-win32-x64-msvc": "2.0.4" } }, "sha512-/QeJDPUw/lWkBJESG264KA9u6/rAjvoJhKncU4rkTi5Ap45kue5HTgOzr0ufxKdd2Xl72fjFBuqlKmtFDD5LiQ=="],
-
     "@ngtools/webpack/@angular/compiler-cli/@angular/compiler": ["@angular/compiler@19.2.25", "", { "dependencies": { "tslib": "^2.3.0" } }, "sha512-GGEeTTd/DV71E07K0u5753bxXozc6Z7iWaCZJDW7xiA7hdHCwrYBMz1PVUJAtXcxf4wTdiXQR48kw8/YHYnDAw=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core": ["@babel/core@7.26.9", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.9", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.9", "@babel/parser": "^7.26.9", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.9", "@babel/types": "^7.26.9", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw=="],
@@ -17746,13 +17706,13 @@
 
     "babel-preset-expo/@babel/generator/@babel/types": ["@babel/types@7.29.8", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg=="],
 
-    "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
+    "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/core": ["@babel/core@7.26.10", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.10", "@babel/types": "^7.26.10", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.29.7", "", {}, "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/traverse": ["@babel/traverse@7.29.8", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.8", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.8", "@babel/template": "^7.29.7", "@babel/types": "^7.29.8", "debug": "^4.3.1" } }, "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg=="],
 
-    "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
+    "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/core": ["@babel/core@7.26.10", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.10", "@babel/types": "^7.26.10", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.29.7", "", {}, "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw=="],
 
@@ -18210,32 +18170,6 @@
 
     "ignore-walk/minimatch/brace-expansion": ["brace-expansion@5.0.9", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg=="],
 
-    "intlayer-next-16/next/@next/env": ["@next/env@16.3.0", "", {}, "sha512-o9r1S0BNiNreHP9Vs+Qnqd9kviDkJh8xIACY7UFZSmiGbbQRzPBBosvHzAU4TULHOIuOj/18RSsyz2qrREmIFw=="],
-
-    "intlayer-next-16/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-55hpqq18bEVAlxedlTt3tFqZmKg2nUXT1kn1G/BGEy0R13h3LwtwHPVzzjG6P4LLeOHE32PFDQUVaJEWvBEZBw=="],
-
-    "intlayer-next-16/next/@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.3.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-SOi96kSaF5T+0wW4koiM1bWzSPwjzTesC1p3df+FjdOi5LIQkBK/blxh7HdoKnNuI4PURF1OO7TZqtfnbWDSgw=="],
-
-    "intlayer-next-16/next/@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.3.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-P0gZAoPMF4dyTRzhmkV4PrqVzSOB6t4mC1oI3c4dqijJ+OVEVx5clIXAKR4/uQpsqw2KKM/0D5tVumcR2r5blg=="],
-
-    "intlayer-next-16/next/@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.3.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-tXXGKJw0m37O0eKJARVTX/TheKPhz0QFVtVVZXmOig+9YKLQOSP6hvf2pxv5DO7CLEJyTHx3Pg043CDQkv1G4Q=="],
-
-    "intlayer-next-16/next/@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.3.0", "", { "os": "linux", "cpu": "x64" }, "sha512-pjGxK5EY7yWml78ALejFkWmgHsU7wbFQrISiugpH6FbUJhgEvw3xFZ/EBAtLl7QtL0WdQKiG9eWJ3mOKGTukHw=="],
-
-    "intlayer-next-16/next/@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.3.0", "", { "os": "linux", "cpu": "x64" }, "sha512-sjo++Xx+lomlPs3HRsHWhVDyGG6ms1kGW5EtHLERdII8AyG1i+f6aq68xHREO6AEMlhjTNEWBSmfJfqm9orf7g=="],
-
-    "intlayer-next-16/next/@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.3.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-C5JSgiO54wURdaxdEUIXqkz04uMqC9UmPX1gtDrV/5Tf1UowdWYI8uA5hfFbPolTlp0q4KZ60xlHePNibf0VIw=="],
-
-    "intlayer-next-16/next/@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.3.0", "", { "os": "win32", "cpu": "x64" }, "sha512-fDOggsweNb5SSw0ZKVk6U+gxSyGFFlIBY/LBc1r8GUj4u/6t6oArL+Pmkg0MBnsgR+KkdsURilVH4F3GXUGepA=="],
-
-    "intlayer-next-16/next/@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
-
-    "intlayer-next-16/next/postcss": ["postcss@8.5.23", "", { "dependencies": { "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg=="],
-
-    "intlayer-next-no-lolale-path/eslint-config-next/@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.3.0", "", { "dependencies": { "@eslint-community/eslint-utils": "4.9.1", "fast-glob": "3.3.1" } }, "sha512-OqgJ8PN0d04KcPhDX/PTY5tJUJZxlbrt7O7FBsm4XE0XW2JDrKnDXsc9uo9WUimJGPoo2j+JRGhyXApC//mvbw=="],
-
-    "intlayer-next-no-lolale-path/eslint-config-next/globals": ["globals@16.4.0", "", {}, "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw=="],
-
     "intlayer-next-no-lolale-path/next/@next/env": ["@next/env@16.3.0", "", {}, "sha512-o9r1S0BNiNreHP9Vs+Qnqd9kviDkJh8xIACY7UFZSmiGbbQRzPBBosvHzAU4TULHOIuOj/18RSsyz2qrREmIFw=="],
 
     "intlayer-next-no-lolale-path/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-55hpqq18bEVAlxedlTt3tFqZmKg2nUXT1kn1G/BGEy0R13h3LwtwHPVzzjG6P4LLeOHE32PFDQUVaJEWvBEZBw=="],
@@ -21946,26 +21880,6 @@
 
     "@nestjs/platform-express/express/body-parser/type-is": ["type-is@2.1.0", "", { "dependencies": { "content-type": "^2.0.0", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA=="],
 
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-darwin-arm64": ["@rspack/binding-darwin-arm64@2.0.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-0Q1QXFEsZfDc4opiDnb8q50KlBbC2VovViDaYlMJZBzvjAo325mh3itXPfz7YZ31M+TxRE7TUiJXH3ltiV1Hdg=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-darwin-x64": ["@rspack/binding-darwin-x64@2.0.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-oO5J2QYf7+H+aYRj85EiGrDOoDEE9EDDl7NgXv46iWvIF0wXowEHXqnjMFxHxRq2Vf6scT+0yYQX9blWcvMWAA=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-arm64-gnu": ["@rspack/binding-linux-arm64-gnu@2.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-BEk6mIYBK4BihW9qXXITJORrVXecTlkRjrqhgefili4xjXtLdcUnxAm9sN/2oJ8m378n2h33qDh4gr2orPBFWQ=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-arm64-musl": ["@rspack/binding-linux-arm64-musl@2.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-Hyt3z1RwNcSMIoaoWLN4Hb/696/O5JPukf8rXQASvf2UkC+X3ij7tr+8lMSYi3Zysi1QL375CnT4fNoABEW0JA=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-x64-gnu": ["@rspack/binding-linux-x64-gnu@2.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-xHorBPBZAg0Pn9Q0k9dWZ9euowieDxcSOzQ9JhTCmhDY6wZH5M/kCBFlCs/OQeW5/NUArW3x3MwEdO/0QJHMxg=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-x64-musl": ["@rspack/binding-linux-x64-musl@2.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-QLxEGUXofF0kVNU12Y2NT3Qi9lGs+WbnYpapVeb+2IXtrAXJfU7Rhy7lAp5GLMzYMQNrKKL9SVnTWKbODbNW9Q=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi": ["@rspack/binding-wasm32-wasi@2.0.4", "", { "dependencies": { "@emnapi/core": "1.10.0", "@emnapi/runtime": "1.10.0", "@napi-rs/wasm-runtime": "1.1.4" }, "cpu": "none" }, "sha512-YhN8HkiH46ONU9tm5dyoXDImDWGpU7E4SPqGI4OyAVF0445uIChurIUmTIOYcD6cg81GGeIjozWJOcb635Dcqw=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-arm64-msvc": ["@rspack/binding-win32-arm64-msvc@2.0.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-MUlYIz82xQRN0aoiXXyEBrNVUwiOSSFRi7nuCgUKduaSdlbPWzCY31IdtOygZ06LVp5JIGUEtyqSrjQq4FrMRw=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-ia32-msvc": ["@rspack/binding-win32-ia32-msvc@2.0.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-D7UcIFMzlY2yhhyuW4Ej15gBWmTwUM5DxuObl3Kv31qRv/pmV3MsqUeG5m2dqLbUxzqPH87qnp0cArbkJQ1b+w=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-x64-msvc": ["@rspack/binding-win32-x64-msvc@2.0.4", "", { "os": "win32", "cpu": "x64" }, "sha512-MnYKPfdrAEbtpKg/1SZ6cNtzreIRyQJK4APbxLLPXENdTH5QXQkaTjLMKEeJcJ51FRhI/+yNpOUm2oTHdCQ1Og=="],
-
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame": ["@babel/code-frame@7.29.7", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/generator": ["@babel/generator@7.29.8", "", { "dependencies": { "@babel/parser": "^7.29.8", "@babel/types": "^7.29.8", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg=="],
@@ -23544,8 +23458,6 @@
 
     "ignore-walk/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
-    "intlayer-next-no-lolale-path/eslint-config-next/@next/eslint-plugin-next/fast-glob": ["fast-glob@3.3.1", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg=="],
-
     "intlayer-nuxt-4/vue/@vue/compiler-dom/@vue/compiler-core": ["@vue/compiler-core@3.5.38", "", { "dependencies": { "@babel/parser": "^7.29.7", "@vue/shared": "3.5.38", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-s99aGxWYig9ErHbct27KXEGhrBYlRI6c4MwAgXErOAbX9xiW37/uMa+XUDO69zLz83dng8UUZ70CTOJrLrYrEQ=="],
 
     "intlayer-nuxt-4/vue/@vue/compiler-sfc/@babel/parser": ["@babel/parser@7.29.8", "", { "dependencies": { "@babel/types": "^7.29.8" }, "bin": "./bin/babel-parser.js" }, "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA=="],
@@ -25052,12 +24964,6 @@
 
     "@nestjs/cli/glob/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
-
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame/js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
@@ -26254,8 +26160,6 @@
 
     "@joshwooding/vite-plugin-react-docgen-typescript/glob/jackspeak/@isaacs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
 
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/core/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
-
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
     "@ngtools/webpack/@angular/compiler-cli/yargs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],

From 4fef8fb2675880df68a4a8a28ac2bca766ce72a9 Mon Sep 17 00:00:00 2001
From: aymericzip <ay.pineau@gmail.com>
Date: Wed, 26 Aug 2026 17:15:08 -0600
Subject: [PATCH 21/32] feat(website): add DISABLE_OPTIMIZATION argument and
 environment variable

---
 apps/website/Dockerfile | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/apps/website/Dockerfile b/apps/website/Dockerfile
index 2bdfd4bb1e..89b93134ae 100644
--- a/apps/website/Dockerfile
+++ b/apps/website/Dockerfile
@@ -19,6 +19,7 @@ ARG VITE_BACKEND_DOMAIN
 ARG VITE_BACKEND_URL
 ARG VITE_ENABLE_SERVICE_WORKER
 ARG INTLAYER_BACKEND_URL
+ARG DISABLE_OPTIMIZATION
 
 ENV INTLAYER_CLIENT_ID=${INTLAYER_CLIENT_ID}
 ENV INTLAYER_CLIENT_SECRET=${INTLAYER_CLIENT_SECRET}
@@ -29,6 +30,8 @@ ENV VITE_CMS_URL=${VITE_CMS_URL}
 ENV VITE_BACKEND_DOMAIN=${VITE_BACKEND_DOMAIN}
 ENV VITE_BACKEND_URL=${VITE_BACKEND_URL}
 ENV VITE_ENABLE_SERVICE_WORKER=${VITE_ENABLE_SERVICE_WORKER}
+ENV INTLAYER_BACKEND_URL=${INTLAYER_BACKEND_URL}
+ENV DISABLE_OPTIMIZATION=${DISABLE_OPTIMIZATION}
 ENV CI=true
 
 # Create app directory

From 494b2a42eb473c40e1cf9d13dbe1a8ccc5253a21 Mon Sep 17 00:00:00 2001
From: aymericzip <ay.pineau@gmail.com>
Date: Wed, 26 Aug 2026 17:23:07 -0600
Subject: [PATCH 22/32] refactor(website): fix review point redesign pr

---
 .../references/concept_content.md             |   8 +-
 .../content/client-component-i18n-en.md       |   4 +-
 .../content/client-component-i18n-es.md       |   4 +-
 .../content/client-component-i18n-fr.md       |   4 +-
 .../content/server-component-i18n-en.md       |   4 +-
 .../content/server-component-i18n-es.md       |   4 +-
 .../content/server-component-i18n-fr.md       |   4 +-
 .../FeaturesSection/FrameworkSelector.tsx     |   2 +-
 .../content/client-component-i18n-en.md       |   4 +-
 .../content/client-component-i18n-es.md       |   4 +-
 .../content/client-component-i18n-fr.md       |   4 +-
 .../content/server-component-i18n-en.md       |   4 +-
 .../content/server-component-i18n-es.md       |   4 +-
 .../content/server-component-i18n-fr.md       |   4 +-
 .../src/components/LandingPage/index.tsx      |  14 ---
 bun.lock                                      | 110 ++++++++++++++++--
 docs/docs/ar/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/de/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/en-GB/dictionary/content_file.md    |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/en/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/es/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/fr/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/hi/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/id/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/it/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/ja/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/ko/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/pl/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/pt/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/ru/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/tr/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/uk/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/vi/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 docs/docs/zh/dictionary/content_file.md       |   8 +-
 .../packages/vite-intlayer/intlayerMinify.md  |   2 +-
 .../src/components/IDE/MarkDownRender.tsx     |   2 -
 .../src/components/Link/Link.tsx              |   9 +-
 54 files changed, 223 insertions(+), 150 deletions(-)

diff --git a/.agents/skills/intlayer-content/references/concept_content.md b/.agents/skills/intlayer-content/references/concept_content.md
index 6cafa2e214..f75fbd3ff9 100644
--- a/.agents/skills/intlayer-content/references/concept_content.md
+++ b/.agents/skills/intlayer-content/references/concept_content.md
@@ -344,15 +344,15 @@ Transforms the dictionary into a per-locale dictionary where each field declared
 
 **Example:**
 
-```json
+```jsonc
 // Per-locale dictionary
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // This becomes a translation node for 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -422,7 +422,7 @@ Instructions for automatically filling dictionary content from external sources.
 
 **Examples:**
 
-```json
+```jsonc
 // Disable filling
 {
   "fill": false
diff --git a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-en.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-en.md
index c9b13ed054..8f6cded294 100644
--- a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-en.md
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-en.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/en/client-component.json
 
 {
   "title": "Title of my component",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-es.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-es.md
index daeedd1cf7..d176743f2d 100644
--- a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-es.md
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-es.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/es/client-component.json
 
 {
   "title": "Título de mi componente",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-fr.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-fr.md
index cf69044516..7cd9649ba4 100644
--- a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-fr.md
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/client-component-i18n-fr.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/fr/client-component.json
 
 {
   "title": "Titre de mon composant",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-en.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-en.md
index 1c56d3f6d9..54fc3bcacd 100644
--- a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-en.md
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-en.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/en/server-component.json
 
 {
   "title": "Title of my component",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-es.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-es.md
index 56fa602d0b..feeeca7a0f 100644
--- a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-es.md
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-es.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/es/server-component.json
 
 {
   "title": "Título de mi componente",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-fr.md b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-fr.md
index 7225da422e..7a42019eaa 100644
--- a/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-fr.md
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/IDESection/content/server-component-i18n-fr.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/fr/server-component.json
 
 {
   "title": "Titre de mon composant",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx b/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
index 1538f8aef6..7ca9698289 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/FrameworkSelector.tsx
@@ -51,7 +51,7 @@ export const FrameworkSelector = ({ frameworks }: FrameworkSelectorProps) => {
       value={framework}
       onChange={setFramework}
       size="sm"
-      color="secondary"
+      color="neutral"
     />
   );
 };
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-en.md b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-en.md
index c9b13ed054..8f6cded294 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-en.md
+++ b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-en.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/en/client-component.json
 
 {
   "title": "Title of my component",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-es.md b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-es.md
index daeedd1cf7..d176743f2d 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-es.md
+++ b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-es.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/es/client-component.json
 
 {
   "title": "Título de mi componente",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-fr.md b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-fr.md
index cf69044516..7cd9649ba4 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-fr.md
+++ b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/client-component-i18n-fr.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/fr/client-component.json
 
 {
   "title": "Titre de mon composant",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-en.md b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-en.md
index 1c56d3f6d9..54fc3bcacd 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-en.md
+++ b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-en.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/en/server-component.json
 
 {
   "title": "Title of my component",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-es.md b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-es.md
index 56fa602d0b..feeeca7a0f 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-es.md
+++ b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-es.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/es/server-component.json
 
 {
   "title": "Título de mi componente",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-fr.md b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-fr.md
index 7225da422e..7a42019eaa 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-fr.md
+++ b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/content/server-component-i18n-fr.md
@@ -1,8 +1,8 @@
-```json
+```jsonc
 // i18n/fr/server-component.json
 
 {
   "title": "Titre de mon composant",
-  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+  "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
 }
 ```
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index 46f8e47856..b9332251d7 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -1,16 +1,9 @@
 import { Loader } from '@intlayer/design-system/loader';
 import { type FC, lazy, Suspense } from 'react';
 import { useIntlayer } from 'react-intlayer';
-import { BackgroundLayout } from '~/components/BackgroundLayout';
 import { CommonQuestionsSection } from '~/components/LandingPage/CommonQuestionsSection/CommonQuestions';
 import { HeroSection } from './HeroSection';
 
-const AvailableTechnoSection = lazy(() =>
-  import('./AvailableTechnoSection').then((mod) => ({
-    default: mod.AvailableTechnoSection,
-  }))
-);
-
 const LanguageSection = lazy(() =>
   import('@intlayer/design-system/language-background').then((mod) => ({
     default: mod.LanguageSection,
@@ -131,10 +124,3 @@ export const LandingPage: FC = () => {
     </>
   );
 };
-
-/*
-
-
-
-
-*/
diff --git a/bun.lock b/bun.lock
index ecf6e41435..ea12c05024 100644
--- a/bun.lock
+++ b/bun.lock
@@ -4200,11 +4200,39 @@
 
     "@nestjs/testing": ["@nestjs/testing@11.1.6", "", { "dependencies": { "tslib": "2.8.1" }, "peerDependencies": { "@nestjs/common": "^11.0.0", "@nestjs/core": "^11.0.0", "@nestjs/microservices": "^11.0.0", "@nestjs/platform-express": "^11.0.0" }, "optionalPeers": ["@nestjs/microservices", "@nestjs/platform-express"] }, "sha512-srYzzDNxGvVCe1j0SpTS9/ix75PKt6Sn6iMaH1rpJ6nj2g8vwNrhK0CoJJXvpCYgrnI+2WES2pprYnq8rAMYHA=="],
 
-    "@next/bundle-analyzer": ["@next/bundle-analyzer@15.5.18", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-v5/UNFwYbBlRQg/Bt+wU65XuxCxPu1AeCOI6s4s6Cludsj7FdVO9E9uzr7GIj8OykSrYtGuEQAUX0Ulje8W2yw=="],
+    "@next/bundle-analyzer": ["@next/bundle-analyzer@16.2.0", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-3F8T1KYVWKBLUXzZPpYSYp134c3iwzNDMxfOE0kkqST+S5VaYao41F0SQogd6E4Od7+C3ReA/XJMDDw9P61n6w=="],
 
     "@next/env": ["@next/env@16.3.1", "", {}, "sha512-35G3xwkQUb2oETSDjFXGrVugknoayLFBh7vSE+yAcl9IP2zT9wyGwq7297AYHR11kJld807t5f8AJBs6WBzXsQ=="],
 
-    "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.3.0", "", { "dependencies": { "@eslint-community/eslint-utils": "4.9.1", "fast-glob": "3.3.1" } }, "sha512-OqgJ8PN0d04KcPhDX/PTY5tJUJZxlbrt7O7FBsm4XE0XW2JDrKnDXsc9uo9WUimJGPoo2j+JRGhyXApC//mvbw=="],
+    "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.2.6", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-Z8l6o4JWKUl755x4R+wogD86KPeU+Ckw4K+SYG4kHeOJtRenDeK+OSbGcqZpDtbwn9DsJVdir2UxmwXuinUbUw=="],
+
+    "@next/rspack-binding": ["@next/rspack-binding@1.0.3", "", { "optionalDependencies": { "@next/rspack-binding-android-arm-eabi": "1.0.3", "@next/rspack-binding-android-arm64": "1.0.3", "@next/rspack-binding-darwin-arm64": "1.0.3", "@next/rspack-binding-darwin-x64": "1.0.3", "@next/rspack-binding-linux-arm-gnueabihf": "1.0.3", "@next/rspack-binding-linux-arm64-gnu": "1.0.3", "@next/rspack-binding-linux-arm64-musl": "1.0.3", "@next/rspack-binding-linux-x64-gnu": "1.0.3", "@next/rspack-binding-linux-x64-musl": "1.0.3", "@next/rspack-binding-win32-arm64-msvc": "1.0.3", "@next/rspack-binding-win32-ia32-msvc": "1.0.3", "@next/rspack-binding-win32-x64-msvc": "1.0.3" } }, "sha512-y42fIcY2Fz0RKgMJt8R9c0Asrp09Evwkkd3RpWaWXhongFlP34IGcF6YuCkZESLywkkrgNalZT8hzYNeq0QYXw=="],
+
+    "@next/rspack-binding-android-arm-eabi": ["@next/rspack-binding-android-arm-eabi@1.0.3", "", { "os": "android", "cpu": "arm" }, "sha512-iyl9QipZl7osUbhi9GNRbZbzTQB//wvRXk6uwMSmRTYGdbSP8lKkZBjso9S5ijAubN1ulRIhe55kl8BzrmhlBA=="],
+
+    "@next/rspack-binding-android-arm64": ["@next/rspack-binding-android-arm64@1.0.3", "", { "os": "android", "cpu": "arm64" }, "sha512-VTHUVNHWbD2HwM/hxEqiiN/X1O/rMfWbDGM+2eL1V2w3H6r5KmKC6V4m/iZJwhknxgRVxQ4R205TCD34OLEfkA=="],
+
+    "@next/rspack-binding-darwin-arm64": ["@next/rspack-binding-darwin-arm64@1.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-i311ThFKKunMxSrYW6TEK+IRUzIvgyYUTkDuDF5+VTm6haoaX9XFyjkUT0lz/3g8LFJBnI20BJpsY6kNXQSb8Q=="],
+
+    "@next/rspack-binding-darwin-x64": ["@next/rspack-binding-darwin-x64@1.0.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-5JUKbG7i59lvaMUm/EYO/T9ukTcWg+daELvHJpnyeRQ3QOZO8lBG8V/qiY5cPUOtxU3D3U3nYfR4TNsAn2K0ew=="],
+
+    "@next/rspack-binding-linux-arm-gnueabihf": ["@next/rspack-binding-linux-arm-gnueabihf@1.0.3", "", { "os": "linux", "cpu": "arm" }, "sha512-CotyzAc/XMVBq/Ju0eeFqVJeLk5YgBf/qnY0pTiEIf/mqfr1/BWOkbnFtHt/SO6jzVSWIAC33iZ3TLfXn3bvyQ=="],
+
+    "@next/rspack-binding-linux-arm64-gnu": ["@next/rspack-binding-linux-arm64-gnu@1.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-jcXWBqE+usDtN4mxenWsfu9Krd7+lBaL977G1nx00M9PXQZX8M52V6TLTVpADIOUa6HfAhGCg0QPhIap8lG1gg=="],
+
+    "@next/rspack-binding-linux-arm64-musl": ["@next/rspack-binding-linux-arm64-musl@1.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-p8CvSpz1tP/kewuPfi513RBDdoWyInqK3d8tVWJbUzxhwjMEc95+4w+OzvEDMlioN5azq3l4mVCm/sWH0qBqOg=="],
+
+    "@next/rspack-binding-linux-x64-gnu": ["@next/rspack-binding-linux-x64-gnu@1.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SViZ7oKgR7Ps+SyhJ0WsQyLxTTw2m0SE2KiepadxmKOPmaich8hj5trUKHefXg5cBPJ5eKAtOozpCNpLD0JdRg=="],
+
+    "@next/rspack-binding-linux-x64-musl": ["@next/rspack-binding-linux-x64-musl@1.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-XEwJWAUhipCGFYb2m1bNZy8uR/rhrGTeezCkZ4qBR3CmZpuGkAS4BBJrMaROmo+hZ73xFNAO+iXLoEacISooqw=="],
+
+    "@next/rspack-binding-win32-arm64-msvc": ["@next/rspack-binding-win32-arm64-msvc@1.0.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-QR6VH6rf2uRmVoqJ3SCmTqdqMPFpXWfUDrpKTce4Ud9U/SpTRAcYkfeA1pIvypCU68vhgk+0/6vR6GPeN0aR7A=="],
+
+    "@next/rspack-binding-win32-ia32-msvc": ["@next/rspack-binding-win32-ia32-msvc@1.0.3", "", { "os": "win32", "cpu": "ia32" }, "sha512-ylVnRMayUex5kfe7nBo6mum6mSBhaTeCJnr9Carmi+7/3h03MXD8HRkWupfpsAYjkpQU+vskONgVvZ/9mNS4oA=="],
+
+    "@next/rspack-binding-win32-x64-msvc": ["@next/rspack-binding-win32-x64-msvc@1.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-fED9bUmsqRqtfQENWZhbnwTkWyWYL6oLoqM0IiASpzB4khBlxBlbPqFhXB5IJWzFHuYbLNfjuJh7SU9k8Rih2Q=="],
+
+    "@next/rspack-core": ["@next/rspack-core@1.0.3", "", { "dependencies": { "@next/rspack-binding": "1.0.3", "@rspack/core": "2.0.4" } }, "sha512-4EDUKhRIuljVhTDjy8DqGvTrWrZIFUHffdAThSB3OAEyCPm+pgM3JedSodm00Od5ox0PpsZ0nWY2sbwsJofg2A=="],
 
     "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ABMIu2zQ7cnNIHm5ivKGwZwUrm0pAai3yiJ/gK/rF1c1VP9UOnj7XECbMKFdVKp9I9eMYq9NoDs1WXOoowxzJw=="],
 
@@ -6862,7 +6890,7 @@
 
     "eslint": ["eslint@10.8.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.7.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.2", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.5", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-wqA7W2jbsC/BnV9Iv1UZpKVFkO1AdNoSmYW8NWG4HNOBbkAMvIqDZ27pI2f07dqn583NcIC44ckjAcOXDL1QbQ=="],
 
-    "eslint-config-next": ["eslint-config-next@16.3.0", "", { "dependencies": { "@next/eslint-plugin-next": "16.3.0", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-lPrf1kHsMJEZqO0uXkNB400c5MGrhrTk3BNX7P0ol4gt61+iUlQfjy9TyIOEA9eOXrf+5+mYbT/JsY8+zqUByQ=="],
+    "eslint-config-next": ["eslint-config-next@16.2.6", "", { "dependencies": { "@next/eslint-plugin-next": "16.2.6", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-z2ELYSkyrrJ6cuunTU8vhsT/RpouPkjaSah06nVW6Rg2Hpg0Vs8s497/e5s8G8qtdp4ccsiovz5P1rv+5VSW2Q=="],
 
     "eslint-config-react-app": ["eslint-config-react-app@7.0.1", "", { "dependencies": { "@babel/core": "^7.16.0", "@babel/eslint-parser": "^7.16.3", "@rushstack/eslint-patch": "^1.1.0", "@typescript-eslint/eslint-plugin": "^5.5.0", "@typescript-eslint/parser": "^5.5.0", "babel-preset-react-app": "^10.0.1", "confusing-browser-globals": "^1.0.11", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jest": "^25.3.0", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.27.1", "eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-testing-library": "^5.0.1" }, "peerDependencies": { "eslint": "^8.0.0" } }, "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA=="],
 
@@ -7418,6 +7446,8 @@
 
     "intlayer-editor": ["intlayer-editor@workspace:packages/intlayer-editor"],
 
+    "intlayer-next-16": ["intlayer-next-16@workspace:examples/nextjs-16-app"],
+
     "intlayer-next-no-lolale-path": ["intlayer-next-no-lolale-path@workspace:examples/next-no-lolale-path"],
 
     "intlayer-nuxt-4": ["intlayer-nuxt-4@workspace:examples/nuxt-4-app"],
@@ -8206,6 +8236,8 @@
 
     "next-intlayer": ["next-intlayer@workspace:packages/next-intlayer"],
 
+    "next-rspack": ["next-rspack@16.3.0", "", { "dependencies": { "@next/rspack-core": "1.0.3" } }, "sha512-VGTrFDuQNXD8clu+i3uhT6lIKDvsQ3tSp2Q5Q/W71EfH0pidZmAsxtwT6EOfOWlQU6AyEEk/UmtGytvzCQCvbQ=="],
+
     "nextjs-15-app": ["nextjs-15-app@workspace:examples/nextjs-15-app"],
 
     "nextjs-app-14-example": ["nextjs-app-14-example@workspace:examples/nextjs-14-app"],
@@ -8322,8 +8354,6 @@
 
     "ofetch": ["ofetch@2.0.0-alpha.3", "", {}, "sha512-zpYTCs2byOuft65vI3z43Dd6iSdFbOZZLb9/d21aCpx2rGastVU9dOCv0lu4ykc1Ur1anAYjDi3SUvR0vq50JA=="],
 
-    "ogl": ["ogl@1.0.11", "", {}, "sha512-kUpC154AFfxi16pmZUK4jk3J+8zxwTWGPo03EoYA8QPbzikHoaC82n6pNTbd+oEaJonaE8aPWBlX7ad9zrqLsA=="],
-
     "ohash": ["ohash@1.1.6", "", {}, "sha512-TBu7PtV8YkAZn0tSxobKY2n2aAQva936lhRrj6957aDaCf9IEtqsKbgMzXE/F/sjqYOwmrukeORHNLe5glk7Cg=="],
 
     "on-change": ["on-change@6.0.2", "", {}, "sha512-08+12qcOVEA0fS9g/VxKS27HaT94nRutUT77J2dr8zv/unzXopvhBuF8tNLWsoLQ5IgrQ6eptGeGqUYat82U1w=="],
@@ -11070,6 +11100,8 @@
 
     "@next/eslint-plugin-next/fast-glob": ["fast-glob@3.3.1", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg=="],
 
+    "@next/rspack-core/@rspack/core": ["@rspack/core@2.0.4", "", { "dependencies": { "@rspack/binding": "2.0.4" }, "peerDependencies": { "@module-federation/runtime-tools": "^0.24.1 || ^2.0.0", "@swc/helpers": ">=0.5.1" }, "optionalPeers": ["@module-federation/runtime-tools", "@swc/helpers"] }, "sha512-OuxdQeeKWQpNvFBRDOcnoSaQvp6E4APM/6JJMM/k0p6oL1TEFQVGdNu3VGY4mRAsebnNBXapMVMhj+v66Bn2pg=="],
+
     "@ngtools/webpack/@angular/compiler-cli": ["@angular/compiler-cli@19.2.25", "", { "dependencies": { "@babel/core": "7.26.9", "@jridgewell/sourcemap-codec": "^1.4.14", "chokidar": "^4.0.0", "convert-source-map": "^1.5.1", "reflect-metadata": "^0.2.0", "semver": "^7.0.0", "tslib": "^2.3.0", "yargs": "^17.2.1" }, "peerDependencies": { "@angular/compiler": "19.2.25", "typescript": ">=5.5 <5.9" }, "bin": { "ngc": "bundles/src/bin/ngc.js", "ngcc": "bundles/ngcc/index.js", "ng-xi18n": "bundles/src/bin/ng_xi18n.js" } }, "sha512-IBBKRz6ua+y6bdcaUIpOPq7G/S4biJfcT1TCMD7wi+48wiKKSXj4J/8BN5fSjt+UozlHwya3B8z0XqnwO2ywZw=="],
 
     "@npmcli/git/npm-pick-manifest": ["npm-pick-manifest@11.0.3", "", { "dependencies": { "npm-install-checks": "^8.0.0", "npm-normalize-package-bin": "^5.0.0", "npm-package-arg": "^13.0.0", "semver": "^7.3.5" } }, "sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ=="],
@@ -12098,6 +12130,10 @@
 
     "intlayer-editor/typescript": ["typescript@7.0.2", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.2", "@typescript/typescript-darwin-arm64": "7.0.2", "@typescript/typescript-darwin-x64": "7.0.2", "@typescript/typescript-freebsd-arm64": "7.0.2", "@typescript/typescript-freebsd-x64": "7.0.2", "@typescript/typescript-linux-arm": "7.0.2", "@typescript/typescript-linux-arm64": "7.0.2", "@typescript/typescript-linux-loong64": "7.0.2", "@typescript/typescript-linux-mips64el": "7.0.2", "@typescript/typescript-linux-ppc64": "7.0.2", "@typescript/typescript-linux-riscv64": "7.0.2", "@typescript/typescript-linux-s390x": "7.0.2", "@typescript/typescript-linux-x64": "7.0.2", "@typescript/typescript-netbsd-arm64": "7.0.2", "@typescript/typescript-netbsd-x64": "7.0.2", "@typescript/typescript-openbsd-arm64": "7.0.2", "@typescript/typescript-openbsd-x64": "7.0.2", "@typescript/typescript-sunos-x64": "7.0.2", "@typescript/typescript-win32-arm64": "7.0.2", "@typescript/typescript-win32-x64": "7.0.2" }, "bin": { "tsc": "bin/tsc" } }, "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA=="],
 
+    "intlayer-next-16/next": ["next@16.3.0", "", { "dependencies": { "@next/env": "16.3.0", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.5.23", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.3.0", "@next/swc-darwin-x64": "16.3.0", "@next/swc-linux-arm64-gnu": "16.3.0", "@next/swc-linux-arm64-musl": "16.3.0", "@next/swc-linux-x64-gnu": "16.3.0", "@next/swc-linux-x64-musl": "16.3.0", "@next/swc-win32-arm64-msvc": "16.3.0", "@next/swc-win32-x64-msvc": "16.3.0", "sharp": "^0.35.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-NEdGOzH+08eTXMUp9UYkA99Nhi5N6Thrhc1jgFOQgfgnGK/dA2hRwBpXep+exdFQrnwlRf/3Wixyp8lLBUpE2A=="],
+
+    "intlayer-next-no-lolale-path/eslint-config-next": ["eslint-config-next@16.3.0", "", { "dependencies": { "@next/eslint-plugin-next": "16.3.0", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-lPrf1kHsMJEZqO0uXkNB400c5MGrhrTk3BNX7P0ol4gt61+iUlQfjy9TyIOEA9eOXrf+5+mYbT/JsY8+zqUByQ=="],
+
     "intlayer-next-no-lolale-path/next": ["next@16.3.0", "", { "dependencies": { "@next/env": "16.3.0", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.5.23", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.3.0", "@next/swc-darwin-x64": "16.3.0", "@next/swc-linux-arm64-gnu": "16.3.0", "@next/swc-linux-arm64-musl": "16.3.0", "@next/swc-linux-x64-gnu": "16.3.0", "@next/swc-linux-x64-musl": "16.3.0", "@next/swc-win32-arm64-msvc": "16.3.0", "@next/swc-win32-x64-msvc": "16.3.0", "sharp": "^0.35.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-NEdGOzH+08eTXMUp9UYkA99Nhi5N6Thrhc1jgFOQgfgnGK/dA2hRwBpXep+exdFQrnwlRf/3Wixyp8lLBUpE2A=="],
 
     "intlayer-nuxt-4/vue": ["vue@3.5.38", "", { "dependencies": { "@vue/compiler-dom": "3.5.38", "@vue/compiler-sfc": "3.5.38", "@vue/runtime-dom": "3.5.38", "@vue/server-renderer": "3.5.38", "@vue/shared": "3.5.38" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-vAMKHfImQlYSy0C+PBue4s3ERZ2xGKfgZg5GXAsLInq1dyh2H78ILVP5sK0KPFPVW4kv+OGCIvBEondcjpZp7A=="],
@@ -12554,6 +12590,8 @@
 
     "next-intlayer/typescript": ["typescript@7.0.2", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.2", "@typescript/typescript-darwin-arm64": "7.0.2", "@typescript/typescript-darwin-x64": "7.0.2", "@typescript/typescript-freebsd-arm64": "7.0.2", "@typescript/typescript-freebsd-x64": "7.0.2", "@typescript/typescript-linux-arm": "7.0.2", "@typescript/typescript-linux-arm64": "7.0.2", "@typescript/typescript-linux-loong64": "7.0.2", "@typescript/typescript-linux-mips64el": "7.0.2", "@typescript/typescript-linux-ppc64": "7.0.2", "@typescript/typescript-linux-riscv64": "7.0.2", "@typescript/typescript-linux-s390x": "7.0.2", "@typescript/typescript-linux-x64": "7.0.2", "@typescript/typescript-netbsd-arm64": "7.0.2", "@typescript/typescript-netbsd-x64": "7.0.2", "@typescript/typescript-openbsd-arm64": "7.0.2", "@typescript/typescript-openbsd-x64": "7.0.2", "@typescript/typescript-sunos-x64": "7.0.2", "@typescript/typescript-win32-arm64": "7.0.2", "@typescript/typescript-win32-x64": "7.0.2" }, "bin": { "tsc": "bin/tsc" } }, "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA=="],
 
+    "nextjs-15-app/@next/bundle-analyzer": ["@next/bundle-analyzer@15.5.18", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-v5/UNFwYbBlRQg/Bt+wU65XuxCxPu1AeCOI6s4s6Cludsj7FdVO9E9uzr7GIj8OykSrYtGuEQAUX0Ulje8W2yw=="],
+
     "nextjs-15-app/next": ["next@15.5.18", "", { "dependencies": { "@next/env": "15.5.18", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.18", "@next/swc-darwin-x64": "15.5.18", "@next/swc-linux-arm64-gnu": "15.5.18", "@next/swc-linux-arm64-musl": "15.5.18", "@next/swc-linux-x64-gnu": "15.5.18", "@next/swc-linux-x64-musl": "15.5.18", "@next/swc-win32-arm64-msvc": "15.5.18", "@next/swc-win32-x64-msvc": "15.5.18", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-eKL8zUJkX9Y5lE+RX/2YJoItVdGlIscyVyboeD9wSpp0PaGqjoA4tTpT2qPqz9ax+5IzGESyLSeZ/RCwbSZ2uQ=="],
 
     "nextjs-app-14-example/@types/node": ["@types/node@25.8.0", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-TCFSk8IZh+iLX1xtksoBVtdmgL+1IX0fC9BeU4QqFSuNdN/K+HUlhqOzEmSYYpZUVsLYcPqc9KX+60iDuninSQ=="],
@@ -16210,6 +16248,8 @@
 
     "@nestjs/schematics/@angular-devkit/schematics/rxjs": ["rxjs@7.8.1", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg=="],
 
+    "@next/rspack-core/@rspack/core/@rspack/binding": ["@rspack/binding@2.0.4", "", { "optionalDependencies": { "@rspack/binding-darwin-arm64": "2.0.4", "@rspack/binding-darwin-x64": "2.0.4", "@rspack/binding-linux-arm64-gnu": "2.0.4", "@rspack/binding-linux-arm64-musl": "2.0.4", "@rspack/binding-linux-x64-gnu": "2.0.4", "@rspack/binding-linux-x64-musl": "2.0.4", "@rspack/binding-wasm32-wasi": "2.0.4", "@rspack/binding-win32-arm64-msvc": "2.0.4", "@rspack/binding-win32-ia32-msvc": "2.0.4", "@rspack/binding-win32-x64-msvc": "2.0.4" } }, "sha512-/QeJDPUw/lWkBJESG264KA9u6/rAjvoJhKncU4rkTi5Ap45kue5HTgOzr0ufxKdd2Xl72fjFBuqlKmtFDD5LiQ=="],
+
     "@ngtools/webpack/@angular/compiler-cli/@angular/compiler": ["@angular/compiler@19.2.25", "", { "dependencies": { "tslib": "^2.3.0" } }, "sha512-GGEeTTd/DV71E07K0u5753bxXozc6Z7iWaCZJDW7xiA7hdHCwrYBMz1PVUJAtXcxf4wTdiXQR48kw8/YHYnDAw=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core": ["@babel/core@7.26.9", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.9", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.9", "@babel/parser": "^7.26.9", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.9", "@babel/types": "^7.26.9", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw=="],
@@ -17706,13 +17746,13 @@
 
     "babel-preset-expo/@babel/generator/@babel/types": ["@babel/types@7.29.8", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg=="],
 
-    "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/core": ["@babel/core@7.26.10", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.10", "@babel/types": "^7.26.10", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ=="],
+    "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.29.7", "", {}, "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/traverse": ["@babel/traverse@7.29.8", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.8", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.8", "@babel/template": "^7.29.7", "@babel/types": "^7.29.8", "debug": "^4.3.1" } }, "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg=="],
 
-    "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/core": ["@babel/core@7.26.10", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.10", "@babel/types": "^7.26.10", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ=="],
+    "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.29.7", "", {}, "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw=="],
 
@@ -18170,6 +18210,32 @@
 
     "ignore-walk/minimatch/brace-expansion": ["brace-expansion@5.0.9", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg=="],
 
+    "intlayer-next-16/next/@next/env": ["@next/env@16.3.0", "", {}, "sha512-o9r1S0BNiNreHP9Vs+Qnqd9kviDkJh8xIACY7UFZSmiGbbQRzPBBosvHzAU4TULHOIuOj/18RSsyz2qrREmIFw=="],
+
+    "intlayer-next-16/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-55hpqq18bEVAlxedlTt3tFqZmKg2nUXT1kn1G/BGEy0R13h3LwtwHPVzzjG6P4LLeOHE32PFDQUVaJEWvBEZBw=="],
+
+    "intlayer-next-16/next/@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.3.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-SOi96kSaF5T+0wW4koiM1bWzSPwjzTesC1p3df+FjdOi5LIQkBK/blxh7HdoKnNuI4PURF1OO7TZqtfnbWDSgw=="],
+
+    "intlayer-next-16/next/@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.3.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-P0gZAoPMF4dyTRzhmkV4PrqVzSOB6t4mC1oI3c4dqijJ+OVEVx5clIXAKR4/uQpsqw2KKM/0D5tVumcR2r5blg=="],
+
+    "intlayer-next-16/next/@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.3.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-tXXGKJw0m37O0eKJARVTX/TheKPhz0QFVtVVZXmOig+9YKLQOSP6hvf2pxv5DO7CLEJyTHx3Pg043CDQkv1G4Q=="],
+
+    "intlayer-next-16/next/@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.3.0", "", { "os": "linux", "cpu": "x64" }, "sha512-pjGxK5EY7yWml78ALejFkWmgHsU7wbFQrISiugpH6FbUJhgEvw3xFZ/EBAtLl7QtL0WdQKiG9eWJ3mOKGTukHw=="],
+
+    "intlayer-next-16/next/@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.3.0", "", { "os": "linux", "cpu": "x64" }, "sha512-sjo++Xx+lomlPs3HRsHWhVDyGG6ms1kGW5EtHLERdII8AyG1i+f6aq68xHREO6AEMlhjTNEWBSmfJfqm9orf7g=="],
+
+    "intlayer-next-16/next/@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.3.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-C5JSgiO54wURdaxdEUIXqkz04uMqC9UmPX1gtDrV/5Tf1UowdWYI8uA5hfFbPolTlp0q4KZ60xlHePNibf0VIw=="],
+
+    "intlayer-next-16/next/@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.3.0", "", { "os": "win32", "cpu": "x64" }, "sha512-fDOggsweNb5SSw0ZKVk6U+gxSyGFFlIBY/LBc1r8GUj4u/6t6oArL+Pmkg0MBnsgR+KkdsURilVH4F3GXUGepA=="],
+
+    "intlayer-next-16/next/@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
+
+    "intlayer-next-16/next/postcss": ["postcss@8.5.23", "", { "dependencies": { "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg=="],
+
+    "intlayer-next-no-lolale-path/eslint-config-next/@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.3.0", "", { "dependencies": { "@eslint-community/eslint-utils": "4.9.1", "fast-glob": "3.3.1" } }, "sha512-OqgJ8PN0d04KcPhDX/PTY5tJUJZxlbrt7O7FBsm4XE0XW2JDrKnDXsc9uo9WUimJGPoo2j+JRGhyXApC//mvbw=="],
+
+    "intlayer-next-no-lolale-path/eslint-config-next/globals": ["globals@16.4.0", "", {}, "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw=="],
+
     "intlayer-next-no-lolale-path/next/@next/env": ["@next/env@16.3.0", "", {}, "sha512-o9r1S0BNiNreHP9Vs+Qnqd9kviDkJh8xIACY7UFZSmiGbbQRzPBBosvHzAU4TULHOIuOj/18RSsyz2qrREmIFw=="],
 
     "intlayer-next-no-lolale-path/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-55hpqq18bEVAlxedlTt3tFqZmKg2nUXT1kn1G/BGEy0R13h3LwtwHPVzzjG6P4LLeOHE32PFDQUVaJEWvBEZBw=="],
@@ -21880,6 +21946,26 @@
 
     "@nestjs/platform-express/express/body-parser/type-is": ["type-is@2.1.0", "", { "dependencies": { "content-type": "^2.0.0", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA=="],
 
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-darwin-arm64": ["@rspack/binding-darwin-arm64@2.0.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-0Q1QXFEsZfDc4opiDnb8q50KlBbC2VovViDaYlMJZBzvjAo325mh3itXPfz7YZ31M+TxRE7TUiJXH3ltiV1Hdg=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-darwin-x64": ["@rspack/binding-darwin-x64@2.0.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-oO5J2QYf7+H+aYRj85EiGrDOoDEE9EDDl7NgXv46iWvIF0wXowEHXqnjMFxHxRq2Vf6scT+0yYQX9blWcvMWAA=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-arm64-gnu": ["@rspack/binding-linux-arm64-gnu@2.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-BEk6mIYBK4BihW9qXXITJORrVXecTlkRjrqhgefili4xjXtLdcUnxAm9sN/2oJ8m378n2h33qDh4gr2orPBFWQ=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-arm64-musl": ["@rspack/binding-linux-arm64-musl@2.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-Hyt3z1RwNcSMIoaoWLN4Hb/696/O5JPukf8rXQASvf2UkC+X3ij7tr+8lMSYi3Zysi1QL375CnT4fNoABEW0JA=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-x64-gnu": ["@rspack/binding-linux-x64-gnu@2.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-xHorBPBZAg0Pn9Q0k9dWZ9euowieDxcSOzQ9JhTCmhDY6wZH5M/kCBFlCs/OQeW5/NUArW3x3MwEdO/0QJHMxg=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-x64-musl": ["@rspack/binding-linux-x64-musl@2.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-QLxEGUXofF0kVNU12Y2NT3Qi9lGs+WbnYpapVeb+2IXtrAXJfU7Rhy7lAp5GLMzYMQNrKKL9SVnTWKbODbNW9Q=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi": ["@rspack/binding-wasm32-wasi@2.0.4", "", { "dependencies": { "@emnapi/core": "1.10.0", "@emnapi/runtime": "1.10.0", "@napi-rs/wasm-runtime": "1.1.4" }, "cpu": "none" }, "sha512-YhN8HkiH46ONU9tm5dyoXDImDWGpU7E4SPqGI4OyAVF0445uIChurIUmTIOYcD6cg81GGeIjozWJOcb635Dcqw=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-arm64-msvc": ["@rspack/binding-win32-arm64-msvc@2.0.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-MUlYIz82xQRN0aoiXXyEBrNVUwiOSSFRi7nuCgUKduaSdlbPWzCY31IdtOygZ06LVp5JIGUEtyqSrjQq4FrMRw=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-ia32-msvc": ["@rspack/binding-win32-ia32-msvc@2.0.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-D7UcIFMzlY2yhhyuW4Ej15gBWmTwUM5DxuObl3Kv31qRv/pmV3MsqUeG5m2dqLbUxzqPH87qnp0cArbkJQ1b+w=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-x64-msvc": ["@rspack/binding-win32-x64-msvc@2.0.4", "", { "os": "win32", "cpu": "x64" }, "sha512-MnYKPfdrAEbtpKg/1SZ6cNtzreIRyQJK4APbxLLPXENdTH5QXQkaTjLMKEeJcJ51FRhI/+yNpOUm2oTHdCQ1Og=="],
+
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame": ["@babel/code-frame@7.29.7", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/generator": ["@babel/generator@7.29.8", "", { "dependencies": { "@babel/parser": "^7.29.8", "@babel/types": "^7.29.8", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg=="],
@@ -23458,6 +23544,8 @@
 
     "ignore-walk/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
+    "intlayer-next-no-lolale-path/eslint-config-next/@next/eslint-plugin-next/fast-glob": ["fast-glob@3.3.1", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg=="],
+
     "intlayer-nuxt-4/vue/@vue/compiler-dom/@vue/compiler-core": ["@vue/compiler-core@3.5.38", "", { "dependencies": { "@babel/parser": "^7.29.7", "@vue/shared": "3.5.38", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-s99aGxWYig9ErHbct27KXEGhrBYlRI6c4MwAgXErOAbX9xiW37/uMa+XUDO69zLz83dng8UUZ70CTOJrLrYrEQ=="],
 
     "intlayer-nuxt-4/vue/@vue/compiler-sfc/@babel/parser": ["@babel/parser@7.29.8", "", { "dependencies": { "@babel/types": "^7.29.8" }, "bin": "./bin/babel-parser.js" }, "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA=="],
@@ -24964,6 +25052,12 @@
 
     "@nestjs/cli/glob/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
+
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
+
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame/js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
@@ -26160,6 +26254,8 @@
 
     "@joshwooding/vite-plugin-react-docgen-typescript/glob/jackspeak/@isaacs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
 
+    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/core/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
     "@ngtools/webpack/@angular/compiler-cli/yargs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
diff --git a/docs/docs/ar/dictionary/content_file.md b/docs/docs/ar/dictionary/content_file.md
index aabeede7e7..8da13967c0 100644
--- a/docs/docs/ar/dictionary/content_file.md
+++ b/docs/docs/ar/dictionary/content_file.md
@@ -367,15 +367,15 @@ export default {
 
 **مثال:**
 
-```json
+```jsonc
 // قاموس حسب اللغة
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // تصبح هذه عقدة ترجمة للغة 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -444,7 +444,7 @@ export default aboutPageMetaContent;
 
 **أمثلة:**
 
-```json
+```jsonc
 // تمكين لجميع اللغات
 {
   "autoFill": true
diff --git a/docs/docs/ar/packages/vite-intlayer/intlayerMinify.md b/docs/docs/ar/packages/vite-intlayer/intlayerMinify.md
index dcab4120a7..6cb605185e 100644
--- a/docs/docs/ar/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/ar/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ export default defineConfig({
 
 عندما يقوم `intlayerPrune` بتحليل قاعدة الكود وتعبئة الخريطة `pruneContext.dictionaryKeyToFieldRenameMap` ، يقوم `intlayerMinify` أيضًا بإعادة تسمية أسماء حقول المحتوى إلى أسماء مستعارة قصيرة. على سبيل المثال:
 
-```json
+```jsonc
 // قبل التشويه
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/de/dictionary/content_file.md b/docs/docs/de/dictionary/content_file.md
index 1c28767bb8..6f03893ceb 100644
--- a/docs/docs/de/dictionary/content_file.md
+++ b/docs/docs/de/dictionary/content_file.md
@@ -367,15 +367,15 @@ Wandelt das Wörterbuch in ein pro-Locale-Wörterbuch um, bei dem jedes im Inhal
 
 **Beispiel:**
 
-```json
+```jsonc
 // Einsprachiges Wörterbuch
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Dies wird zu einem Übersetzungsknoten für 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -444,7 +444,7 @@ Anweisungen zum automatischen Ausfüllen von Wörterbuchinhalten aus externen Qu
 
 **Beispiele:**
 
-```json
+```jsonc
 // Für alle Sprachen aktivieren
 {
   "autoFill": true
diff --git a/docs/docs/de/packages/vite-intlayer/intlayerMinify.md b/docs/docs/de/packages/vite-intlayer/intlayerMinify.md
index 2c987ad777..02749dd189 100644
--- a/docs/docs/de/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/de/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ Das Plugin zielt auf zwei Wörterbuchverzeichnisse ab (wie in `intlayer.system`
 
 Wenn `intlayerPrune` die Codebasis analysiert und `pruneContext.dictionaryKeyToFieldRenameMap` befüllt hat, benennt `intlayerMinify` auch Inhaltsfeldnamen in kurze Aliase um. Zum Beispiel:
 
-```json
+```jsonc
 // vorher
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/en-GB/dictionary/content_file.md b/docs/docs/en-GB/dictionary/content_file.md
index 60d4d1410b..16c4d0a7b3 100644
--- a/docs/docs/en-GB/dictionary/content_file.md
+++ b/docs/docs/en-GB/dictionary/content_file.md
@@ -363,15 +363,15 @@ Transforms the dictionary into a per-locale dictionary where each field declared
 
 **Example:**
 
-```json
+```jsonc
 // Per-locale dictionary
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // This becomes a translation node for 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -440,7 +440,7 @@ Instructions for automatically filling dictionary content from external sources.
 
 **Examples:**
 
-```json
+```jsonc
 // Enable for all locales
 {
   "autoFill": true
diff --git a/docs/docs/en-GB/packages/vite-intlayer/intlayerMinify.md b/docs/docs/en-GB/packages/vite-intlayer/intlayerMinify.md
index 6a5d725371..4d9c78496f 100644
--- a/docs/docs/en-GB/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/en-GB/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ The plugin targets two dictionary locations (as resolved from `intlayer.system`)
 
 When `intlayerPrune` has analysed the codebase and populated `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` also renames content field names to short aliases. For example:
 
-```json
+```jsonc
 // before
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/en/dictionary/content_file.md b/docs/docs/en/dictionary/content_file.md
index 325bbe6b5f..33ee102b65 100644
--- a/docs/docs/en/dictionary/content_file.md
+++ b/docs/docs/en/dictionary/content_file.md
@@ -369,15 +369,15 @@ Transforms the dictionary into a per-locale dictionary where each field declared
 
 **Example:**
 
-```json
+```jsonc
 // Per-locale dictionary
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // This becomes a translation node for 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -447,7 +447,7 @@ Instructions for automatically filling dictionary content from external sources.
 
 **Examples:**
 
-```json
+```jsonc
 // Disable filling
 {
   "fill": false
diff --git a/docs/docs/en/packages/vite-intlayer/intlayerMinify.md b/docs/docs/en/packages/vite-intlayer/intlayerMinify.md
index a42d62d203..23566004f0 100644
--- a/docs/docs/en/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/en/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ The plugin targets two dictionary locations (as resolved from `intlayer.system`)
 
 When `intlayerPrune` has analysed the codebase and populated `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` also renames content field names to short aliases. For example:
 
-```json
+```jsonc
 // before
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/es/dictionary/content_file.md b/docs/docs/es/dictionary/content_file.md
index 86536d9dbd..b2d08a224e 100644
--- a/docs/docs/es/dictionary/content_file.md
+++ b/docs/docs/es/dictionary/content_file.md
@@ -366,15 +366,15 @@ Transforma el diccionario en un diccionario por localización donde cada campo d
 
 **Ejemplo:**
 
-```json
+```jsonc
 // Diccionario por idioma
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Esto se convierte en un nodo de traducción para 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -443,7 +443,7 @@ Instrucciones para rellenar automáticamente el contenido del diccionario desde
 
 **Ejemplos:**
 
-```json
+```jsonc
 // Habilitar para todas las locales
 {
   "autoFill": true
diff --git a/docs/docs/es/packages/vite-intlayer/intlayerMinify.md b/docs/docs/es/packages/vite-intlayer/intlayerMinify.md
index 6ff87106b4..ca80ccc44c 100644
--- a/docs/docs/es/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/es/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ El plugin apunta a dos ubicaciones de diccionarios (según lo resuelto a partir
 
 Cuando `intlayerPrune` ha analizado el código fuente y ha llenado `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` también cambia el nombre de los campos de contenido a alias cortos. Por ejemplo:
 
-```json
+```jsonc
 // antes
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/fr/dictionary/content_file.md b/docs/docs/fr/dictionary/content_file.md
index 1a4e5ee41f..73ca97c03e 100644
--- a/docs/docs/fr/dictionary/content_file.md
+++ b/docs/docs/fr/dictionary/content_file.md
@@ -363,15 +363,15 @@ Transforme le dictionnaire en un dictionnaire par locale où chaque champ décla
 
 **Exemple :**
 
-```json
+```jsonc
 // Dictionnaire par langue
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Ceci devient un nœud de traduction pour 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -440,7 +440,7 @@ Instructions pour remplir automatiquement le contenu du dictionnaire à partir d
 
 **Exemples :**
 
-```json
+```jsonc
 // Activer pour toutes les locales
 {
   "autoFill": true
diff --git a/docs/docs/fr/packages/vite-intlayer/intlayerMinify.md b/docs/docs/fr/packages/vite-intlayer/intlayerMinify.md
index 015bbf1569..cd43ccec00 100644
--- a/docs/docs/fr/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/fr/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ Le plugin cible deux emplacements de dictionnaire (tels que résolus depuis `int
 
 Lorsque `intlayerPrune` a analysé la codebase et rempli `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` renomme également les noms de champs de contenu en alias courts. Par exemple :
 
-```json
+```jsonc
 // avant
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/hi/dictionary/content_file.md b/docs/docs/hi/dictionary/content_file.md
index d45da93d7b..faf1d020ad 100644
--- a/docs/docs/hi/dictionary/content_file.md
+++ b/docs/docs/hi/dictionary/content_file.md
@@ -365,15 +365,15 @@ Intlayer में एक शब्दकोश `Dictionary` प्रकार
 
 **उदाहरण:**
 
-```json
+```jsonc
 // प्रति-स्थान शब्दकोश
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // यह 'en' के लिए एक अनुवाद नोड बन जाता है
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -442,7 +442,7 @@ export default aboutPageMetaContent;
 
 **उदाहरण:**
 
-```json
+```jsonc
 // सभी स्थानों के लिए सक्षम करें
 {
   "autoFill": true
diff --git a/docs/docs/hi/packages/vite-intlayer/intlayerMinify.md b/docs/docs/hi/packages/vite-intlayer/intlayerMinify.md
index a8059318e8..a3cbfc2909 100644
--- a/docs/docs/hi/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/hi/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ export default defineConfig({
 
 जब `intlayerPrune` ने कोडबेस का विश्लेषण किया है और `pruneContext.dictionaryKeyToFieldRenameMap` को पॉप्युलेट किया है, तो `intlayerMinify` सामग्री फ़ील्ड नामों का नाम बदलकर छोटे उपनाम भी रख देता है। उदाहरण के लिए:
 
-```json
+```jsonc
 // पहले
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/id/dictionary/content_file.md b/docs/docs/id/dictionary/content_file.md
index 27e9aade34..84a1e07a39 100644
--- a/docs/docs/id/dictionary/content_file.md
+++ b/docs/docs/id/dictionary/content_file.md
@@ -366,15 +366,15 @@ Mengubah kamus menjadi kamus per-locale di mana setiap field yang dideklarasikan
 
 **Contoh:**
 
-```json
+```jsonc
 // Kamus per-lokasi
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Ini menjadi node terjemahan untuk 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -444,7 +444,7 @@ Instruksi untuk mengisi konten kamus secara otomatis dari sumber eksternal. Ini
 
 **Contoh:**
 
-```json
+```jsonc
 // Menonaktifkan pengisian
 {
   "fill": false
diff --git a/docs/docs/id/packages/vite-intlayer/intlayerMinify.md b/docs/docs/id/packages/vite-intlayer/intlayerMinify.md
index ed8f32ad57..1e3b928655 100644
--- a/docs/docs/id/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/id/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ Plugin ini menargetkan dua lokasi kamus (seperti yang diselesaikan dari `intlaye
 
 Ketika `intlayerPrune` telah menganalisis codebase dan mengisi `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` juga mengganti nama bidang konten menjadi alias pendek. Sebagai contoh:
 
-```json
+```jsonc
 // sebelum
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/it/dictionary/content_file.md b/docs/docs/it/dictionary/content_file.md
index a5cf0cae3c..3ae20db861 100644
--- a/docs/docs/it/dictionary/content_file.md
+++ b/docs/docs/it/dictionary/content_file.md
@@ -364,15 +364,15 @@ Trasforma il dizionario in un dizionario per locale in cui ogni campo dichiarato
 
 **Esempio:**
 
-```json
+```jsonc
 // Dizionario per lingua
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Questo diventa un nodo di traduzione per 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -441,7 +441,7 @@ Istruzioni per il riempimento automatico del contenuto del dizionario da fonti e
 
 **Esempi:**
 
-```json
+```jsonc
 // Abilita per tutte le localizzazioni
 {
   "autoFill": true
diff --git a/docs/docs/it/packages/vite-intlayer/intlayerMinify.md b/docs/docs/it/packages/vite-intlayer/intlayerMinify.md
index 019ef1f82e..f11ad2e5de 100644
--- a/docs/docs/it/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/it/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ Il plugin prende di mira due posizioni del dizionario (come risolto da `intlayer
 
 Quando `intlayerPrune` ha analizzato la codebase e popolato `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` rinomina anche i nomi dei campi di contenuto in brevi alias. Ad esempio:
 
-```json
+```jsonc
 // prima
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/ja/dictionary/content_file.md b/docs/docs/ja/dictionary/content_file.md
index b1ae153721..d6f64003bf 100644
--- a/docs/docs/ja/dictionary/content_file.md
+++ b/docs/docs/ja/dictionary/content_file.md
@@ -364,15 +364,15 @@ Intlayerの辞書は`Dictionary`型で定義され、その動作を制御する
 
 **例:**
 
-```json
+```jsonc
 // ロケール別辞書
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // これは 'en' の翻訳ノードになります
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -441,7 +441,7 @@ export default aboutPageMetaContent;
 
 **例：**
 
-```json
+```jsonc
 // すべてのロケールで有効化
 {
   "autoFill": true
diff --git a/docs/docs/ja/packages/vite-intlayer/intlayerMinify.md b/docs/docs/ja/packages/vite-intlayer/intlayerMinify.md
index 511e75d414..22e7a46a5e 100644
--- a/docs/docs/ja/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/ja/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ export default defineConfig({
 
 `intlayerPrune`がコードベースを分析し、`pruneContext.dictionaryKeyToFieldRenameMap`にデータを入力すると、`intlayerMinify`はコンテンツフィールド名を短いエイリアスに変更します。例えば：
 
-```json
+```jsonc
 // 変更前
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/ko/dictionary/content_file.md b/docs/docs/ko/dictionary/content_file.md
index b2d0f4f840..d02469ec6c 100644
--- a/docs/docs/ko/dictionary/content_file.md
+++ b/docs/docs/ko/dictionary/content_file.md
@@ -364,15 +364,15 @@ content: { /* ... */ }
 
 **예시:**
 
-```json
+```jsonc
 // 로케일별 사전
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // 'en'에 대한 번역 노드가 됩니다.
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -441,7 +441,7 @@ export default aboutPageMetaContent;
 
 **예시:**
 
-```json
+```jsonc
 // 모든 로케일에 대해 활성화
 {
   "autoFill": true
diff --git a/docs/docs/ko/packages/vite-intlayer/intlayerMinify.md b/docs/docs/ko/packages/vite-intlayer/intlayerMinify.md
index aa688124d4..83ce0e3094 100644
--- a/docs/docs/ko/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/ko/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ export default defineConfig({
 
 `intlayerPrune`이 코드베이스를 분석하고 `pruneContext.dictionaryKeyToFieldRenameMap`을 채우면, `intlayerMinify`도 콘텐츠 필드 이름을 짧은 별칭으로 바꿉니다. 예를 들어:
 
-```json
+```jsonc
 // 변경 전
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/pl/dictionary/content_file.md b/docs/docs/pl/dictionary/content_file.md
index 1c4dff0265..ef727dca34 100644
--- a/docs/docs/pl/dictionary/content_file.md
+++ b/docs/docs/pl/dictionary/content_file.md
@@ -366,15 +366,15 @@ Przekształca słownik w słownik per-lokalizacyjny, gdzie każde pole zadeklaro
 
 **Przykład:**
 
-```json
+```jsonc
 // Słownik per-locale
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // To staje się węzłem tłumaczenia dla 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -444,7 +444,7 @@ Instrukcje dotyczące automatycznego wypełniania zawartości słownika z zewnę
 
 **Przykłady:**
 
-```json
+```jsonc
 // Wyłącz wypełnianie
 {
   "fill": false
diff --git a/docs/docs/pl/packages/vite-intlayer/intlayerMinify.md b/docs/docs/pl/packages/vite-intlayer/intlayerMinify.md
index 735e0d1236..38adfbae38 100644
--- a/docs/docs/pl/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/pl/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ Wtyczka kieruje swoje działanie na dwie lokalizacje słowników (rozpoznane na
 
 Gdy wtyczka `intlayerPrune` przeanalizuje bazę kodu i uzupełni `pruneContext.dictionaryKeyToFieldRenameMap`, wtyczka `intlayerMinify` również zmienia nazwy pól zawartości na krótkie aliasy. Na przykład:
 
-```json
+```jsonc
 // przed
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/pt/dictionary/content_file.md b/docs/docs/pt/dictionary/content_file.md
index 425f23ea6b..1cf4daa428 100644
--- a/docs/docs/pt/dictionary/content_file.md
+++ b/docs/docs/pt/dictionary/content_file.md
@@ -364,15 +364,15 @@ Transforma o dicionário em um dicionário por localidade onde cada campo declar
 
 **Exemplo:**
 
-```json
+```jsonc
 // Dicionário por idioma
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Isto se torna um nó de tradução para 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -441,7 +441,7 @@ Instruções para preenchimento automático do conteúdo do dicionário a partir
 
 **Exemplos:**
 
-```json
+```jsonc
 // Ativa para todas as localidades
 {
   "autoFill": true
diff --git a/docs/docs/pt/packages/vite-intlayer/intlayerMinify.md b/docs/docs/pt/packages/vite-intlayer/intlayerMinify.md
index 1a1d0e966b..6f15288602 100644
--- a/docs/docs/pt/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/pt/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ O plugin tem como alvo dois locais de dicionário (conforme resolvido a partir d
 
 Quando o `intlayerPrune` analisa o código-fonte e preenche `pruneContext.dictionaryKeyToFieldRenameMap`, o `intlayerMinify` também renomeia os nomes dos campos de conteúdo para aliases curtos. Por exemplo:
 
-```json
+```jsonc
 // antes
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/ru/dictionary/content_file.md b/docs/docs/ru/dictionary/content_file.md
index 01abfb08e7..d862a3ad37 100644
--- a/docs/docs/ru/dictionary/content_file.md
+++ b/docs/docs/ru/dictionary/content_file.md
@@ -367,15 +367,15 @@ Intlayer поддерживает различные типы содержимо
 
 **Пример:**
 
-```json
+```jsonc
 // Словарь для одной локали
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Это становится узлом перевода для 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -444,7 +444,7 @@ export default aboutPageMetaContent;
 
 **Примеры:**
 
-```json
+```jsonc
 // Включить для всех локалей
 {
   "autoFill": true
diff --git a/docs/docs/ru/packages/vite-intlayer/intlayerMinify.md b/docs/docs/ru/packages/vite-intlayer/intlayerMinify.md
index 646fcbd977..763cf67a60 100644
--- a/docs/docs/ru/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/ru/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ export default defineConfig({
 
 Когда `intlayerPrune` анализирует кодовую базу и заполняет карту `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` также переименовывает имена полей контента в короткие алиасы. Например:
 
-```json
+```jsonc
 // до
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/tr/dictionary/content_file.md b/docs/docs/tr/dictionary/content_file.md
index a9c24bd7c3..530a0de46f 100644
--- a/docs/docs/tr/dictionary/content_file.md
+++ b/docs/docs/tr/dictionary/content_file.md
@@ -363,15 +363,15 @@ Sözlüğü, içerikte bildirilen her alanın otomatik olarak bir çeviri düğ
 
 **Örnek:**
 
-```json
+```jsonc
 // Yerel dil bazlı sözlük
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Bu 'en' için bir çeviri düğümü olur
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -440,7 +440,7 @@ Sözlük içeriğini harici kaynaklardan otomatik olarak doldurma talimatları.
 
 **Örnekler:**
 
-```json
+```jsonc
 // Tüm yerel diller için etkinleştir
 {
   "autoFill": true
diff --git a/docs/docs/tr/packages/vite-intlayer/intlayerMinify.md b/docs/docs/tr/packages/vite-intlayer/intlayerMinify.md
index cf110747cc..2b7be89c4e 100644
--- a/docs/docs/tr/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/tr/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ Eklenti, iki sözlük konumunu hedefler (`intlayer.system` üzerinden çözümle
 
 `intlayerPrune` kod tabanını analiz edip `pruneContext.dictionaryKeyToFieldRenameMap` eşlemesini doldurduğunda, `intlayerMinify` içerik alanı adlarını da kısa takma adlarla yeniden adlandırır. Örneğin:
 
-```json
+```jsonc
 // önce
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/uk/dictionary/content_file.md b/docs/docs/uk/dictionary/content_file.md
index fc41b2ad26..0ec41d82c2 100644
--- a/docs/docs/uk/dictionary/content_file.md
+++ b/docs/docs/uk/dictionary/content_file.md
@@ -372,15 +372,15 @@ Intlayer підтримує різні типи контенту через ти
 
 **Приклад:**
 
-```json
+```jsonc
 // Словник для конкретної локалі
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Це стає вузлом перекладу для 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -450,7 +450,7 @@ export default aboutPageMetaContent;
 
 **Приклади:**
 
-```json
+```jsonc
 // Вимкнути автозаповнення
 {
   "fill": false
diff --git a/docs/docs/uk/packages/vite-intlayer/intlayerMinify.md b/docs/docs/uk/packages/vite-intlayer/intlayerMinify.md
index 534b5b3ce0..fb35084601 100644
--- a/docs/docs/uk/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/uk/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ export default defineConfig({
 
 Коли `intlayerPrune` аналізує кодову базу і заповнює карту `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` також перейменовує імена полів контенту на короткі аліаси. Наприклад:
 
-```json
+```jsonc
 // до
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/vi/dictionary/content_file.md b/docs/docs/vi/dictionary/content_file.md
index 18a13f19c4..60cedb516d 100644
--- a/docs/docs/vi/dictionary/content_file.md
+++ b/docs/docs/vi/dictionary/content_file.md
@@ -369,15 +369,15 @@ Chuyển đổi từ điển thành từ điển theo từng locale, trong đó
 
 **Ví dụ:**
 
-```json
+```jsonc
 // Từ điển theo ngôn ngữ
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "About Us", // Đây trở thành nút dịch cho 'en'
-    "description": "Learn more about our company"
-  }
+    "description": "Learn more about our company",
+  },
 }
 ```
 
@@ -447,7 +447,7 @@ Hướng dẫn tự động điền nội dung từ điển từ các nguồn b
 
 **Ví dụ:**
 
-```json
+```jsonc
 // Tắt tính năng điền
 {
   "fill": false
diff --git a/docs/docs/vi/packages/vite-intlayer/intlayerMinify.md b/docs/docs/vi/packages/vite-intlayer/intlayerMinify.md
index 675384ad82..9b333205ae 100644
--- a/docs/docs/vi/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/vi/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ Plugin nhắm vào hai vị trí từ điển (được phân giải từ `intla
 
 Khi `intlayerPrune` đã phân tích mã nguồn và cập nhật dữ liệu cho `pruneContext.dictionaryKeyToFieldRenameMap`, `intlayerMinify` cũng đổi tên các trường nội dung thành các bí danh ngắn. Ví dụ:
 
-```json
+```jsonc
 // trước khi đổi
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/docs/docs/zh/dictionary/content_file.md b/docs/docs/zh/dictionary/content_file.md
index 07b28b0264..8dc98ddff7 100644
--- a/docs/docs/zh/dictionary/content_file.md
+++ b/docs/docs/zh/dictionary/content_file.md
@@ -364,15 +364,15 @@ Intlayer 中的字典由 `Dictionary` 类型定义，包含多个控制其行为
 
 **示例：**
 
-```json
+```jsonc
 // 按语言环境字典
 {
   "key": "about-page",
   "locale": "en",
   "content": {
     "title": "关于我们", // 这将成为 'en' 的翻译节点
-    "description": "了解更多关于我们公司的信息"
-  }
+    "description": "了解更多关于我们公司的信息",
+  },
 }
 ```
 
@@ -441,7 +441,7 @@ export default aboutPageMetaContent;
 
 **示例：**
 
-```json
+```jsonc
 // 为所有语言启用
 {
   "autoFill": true
diff --git a/docs/docs/zh/packages/vite-intlayer/intlayerMinify.md b/docs/docs/zh/packages/vite-intlayer/intlayerMinify.md
index 48cf9320e9..fd82e79d44 100644
--- a/docs/docs/zh/packages/vite-intlayer/intlayerMinify.md
+++ b/docs/docs/zh/packages/vite-intlayer/intlayerMinify.md
@@ -71,7 +71,7 @@ export default defineConfig({
 
 当 `intlayerPrune` 分析了代码库并填充了 `pruneContext.dictionaryKeyToFieldRenameMap` 时，`intlayerMinify` 也会将内容字段名称重命名为简短别名。例如：
 
-```json
+```jsonc
 // 混淆前
 { "key": "myDict", "content": { "title": "Hello", "description": "World" } }
 
diff --git a/packages/@intlayer/design-system/src/components/IDE/MarkDownRender.tsx b/packages/@intlayer/design-system/src/components/IDE/MarkDownRender.tsx
index ff02a76c43..43e42075f4 100644
--- a/packages/@intlayer/design-system/src/components/IDE/MarkDownRender.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/MarkDownRender.tsx
@@ -5,14 +5,12 @@ import { Code } from './Code';
 import type { CodeLanguage } from './shikiLanguages';
 
 type MarkdownRendererProps = {
-  isDarkMode?: boolean;
   codeClassName?: string;
   children: string;
 };
 
 export const MarkdownRenderer: FC<MarkdownRendererProps> = ({
   children,
-  isDarkMode,
   codeClassName,
 }) => (
   <MarkdownRendererIntlayer
diff --git a/packages/@intlayer/design-system/src/components/Link/Link.tsx b/packages/@intlayer/design-system/src/components/Link/Link.tsx
index 545af8a419..5f4f74674b 100644
--- a/packages/@intlayer/design-system/src/components/Link/Link.tsx
+++ b/packages/@intlayer/design-system/src/components/Link/Link.tsx
@@ -86,7 +86,7 @@ export const linkVariants = cva(
         light: 'text-white',
         dark: 'text-neutral-800',
         text: 'text-foreground',
-        'text-inverse': 'text-foreground-opposite', // seulement utilisé hors button/button-outlined
+        'text-inverse': 'text-foreground-opposite',
         error: 'text-error',
         success: 'text-success',
         custom: '',
@@ -105,9 +105,6 @@ export const linkVariants = cva(
       },
     },
     compoundVariants: [
-      // ----------------------------------------------------------------
-      // BUTTON PLEIN : paires fond/texte EXPLICITES, tirées du thème réel
-      // ----------------------------------------------------------------
       {
         variant: 'button',
         color: 'primary',
@@ -154,9 +151,6 @@ export const linkVariants = cva(
         class: 'bg-success text-white ring-success/20',
       },
 
-      // ----------------------------------------------------------------
-      // BUTTON OUTLINED : bordure + texte de la couleur, fond transparent
-      // ----------------------------------------------------------------
       {
         variant: 'button-outlined',
         color: 'primary',
@@ -203,7 +197,6 @@ export const linkVariants = cva(
         class: 'border-success text-success hover:bg-success/10',
       },
 
-      // Min height et padding selon size (inchangé)
       {
         variant: ['button', 'button-outlined'],
         size: 'sm',

From edf08207bd7b20563a6ea9ab6fde4d9e2baf11ab Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Fri, 28 Aug 2026 01:12:59 +0200
Subject: [PATCH 23/32] style(design-system): fixed the shiki higlight styling

---
 apps/website/src/components/LightRays.tsx     | 469 ------------------
 apps/website/src/shiki.css                    |   6 +-
 .../design-system/src/components/IDE/Code.tsx |   4 +-
 .../@intlayer/design-system/styles/themes.css |   8 +
 4 files changed, 14 insertions(+), 473 deletions(-)
 delete mode 100644 apps/website/src/components/LightRays.tsx

diff --git a/apps/website/src/components/LightRays.tsx b/apps/website/src/components/LightRays.tsx
deleted file mode 100644
index 2032aaf8a6..0000000000
--- a/apps/website/src/components/LightRays.tsx
+++ /dev/null
@@ -1,469 +0,0 @@
-import { Mesh, Program, Renderer, Triangle } from 'ogl';
-import { useEffect, useRef, useState } from 'react';
-
-export type RaysOrigin =
-  | 'top-center'
-  | 'top-left'
-  | 'top-right'
-  | 'right'
-  | 'left'
-  | 'bottom-center'
-  | 'bottom-right'
-  | 'bottom-left';
-
-interface LightRaysProps {
-  raysOrigin?: RaysOrigin;
-  raysColor?: string;
-  raysSpeed?: number;
-  lightSpread?: number;
-  rayLength?: number;
-  pulsating?: boolean;
-  fadeDistance?: number;
-  saturation?: number;
-  followMouse?: boolean;
-  mouseInfluence?: number;
-  noiseAmount?: number;
-  distortion?: number;
-  className?: string;
-}
-
-const DEFAULT_COLOR = '#ffffff';
-
-const hexToRgb = (hex: string): [number, number, number] => {
-  const m = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-  return m
-    ? [
-        parseInt(m[1], 16) / 255,
-        parseInt(m[2], 16) / 255,
-        parseInt(m[3], 16) / 255,
-      ]
-    : [1, 1, 1];
-};
-
-const getAnchorAndDir = (
-  origin: RaysOrigin,
-  w: number,
-  h: number
-): { anchor: [number, number]; dir: [number, number] } => {
-  const outside = 0.2;
-  switch (origin) {
-    case 'top-left':
-      return { anchor: [0, -outside * h], dir: [0, 1] };
-    case 'top-right':
-      return { anchor: [w, -outside * h], dir: [0, 1] };
-    case 'left':
-      return { anchor: [-outside * w, 0.5 * h], dir: [1, 0] };
-    case 'right':
-      return { anchor: [(1 + outside) * w, 0.5 * h], dir: [-1, 0] };
-    case 'bottom-left':
-      return { anchor: [0, (1 + outside) * h], dir: [0, -1] };
-    case 'bottom-center':
-      return { anchor: [0.5 * w, (1 + outside) * h], dir: [0, -1] };
-    case 'bottom-right':
-      return { anchor: [w, (1 + outside) * h], dir: [0, -1] };
-    default: // "top-center"
-      return { anchor: [0.5 * w, -outside * h], dir: [0, 1] };
-  }
-};
-
-type Vec2 = [number, number];
-type Vec3 = [number, number, number];
-
-interface Uniforms {
-  iTime: { value: number };
-  iResolution: { value: Vec2 };
-  rayPos: { value: Vec2 };
-  rayDir: { value: Vec2 };
-  raysColor: { value: Vec3 };
-  raysSpeed: { value: number };
-  lightSpread: { value: number };
-  rayLength: { value: number };
-  pulsating: { value: number };
-  fadeDistance: { value: number };
-  saturation: { value: number };
-  mousePos: { value: Vec2 };
-  mouseInfluence: { value: number };
-  noiseAmount: { value: number };
-  distortion: { value: number };
-}
-
-const LightRays: React.FC<LightRaysProps> = ({
-  raysOrigin = 'top-center',
-  raysColor = DEFAULT_COLOR,
-  raysSpeed = 1,
-  lightSpread = 1,
-  rayLength = 2,
-  pulsating = false,
-  fadeDistance = 1.0,
-  saturation = 1.0,
-  followMouse = true,
-  mouseInfluence = 0.1,
-  noiseAmount = 0.0,
-  distortion = 0.0,
-  className = '',
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const uniformsRef = useRef<Uniforms | null>(null);
-  const rendererRef = useRef<Renderer | null>(null);
-  const mouseRef = useRef({ x: 0.5, y: 0.5 });
-  const smoothMouseRef = useRef({ x: 0.5, y: 0.5 });
-  const animationIdRef = useRef<number | null>(null);
-  const meshRef = useRef<Mesh | null>(null);
-  const cleanupFunctionRef = useRef<(() => void) | null>(null);
-  const [isVisible, setIsVisible] = useState(false);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        setIsVisible(entry.isIntersecting);
-      },
-      { threshold: 0.1 }
-    );
-
-    observerRef.current.observe(containerRef.current);
-
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-        observerRef.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!isVisible || !containerRef.current) return;
-
-    if (cleanupFunctionRef.current) {
-      cleanupFunctionRef.current();
-      cleanupFunctionRef.current = null;
-    }
-
-    const initializeWebGL = async () => {
-      if (!containerRef.current) return;
-
-      await new Promise((resolve) => setTimeout(resolve, 10));
-
-      if (!containerRef.current) return;
-
-      const renderer = new Renderer({
-        dpr: Math.min(window.devicePixelRatio, 2),
-        alpha: true,
-      });
-      rendererRef.current = renderer;
-
-      const gl = renderer.gl;
-      gl.canvas.style.width = '100%';
-      gl.canvas.style.height = '100%';
-
-      while (containerRef.current.firstChild) {
-        containerRef.current.removeChild(containerRef.current.firstChild);
-      }
-      containerRef.current.appendChild(gl.canvas);
-
-      const vert = `
-attribute vec2 position;
-varying vec2 vUv;
-void main() {
-  vUv = position * 0.5 + 0.5;
-  gl_Position = vec4(position, 0.0, 1.0);
-}`;
-
-      const frag = `precision highp float;
-
-uniform float iTime;
-uniform vec2  iResolution;
-
-uniform vec2  rayPos;
-uniform vec2  rayDir;
-uniform vec3  raysColor;
-uniform float raysSpeed;
-uniform float lightSpread;
-uniform float rayLength;
-uniform float pulsating;
-uniform float fadeDistance;
-uniform float saturation;
-uniform vec2  mousePos;
-uniform float mouseInfluence;
-uniform float noiseAmount;
-uniform float distortion;
-
-varying vec2 vUv;
-
-float noise(vec2 st) {
-  return fract(sin(dot(st.xy, vec2(12.9898,78.233))) * 43758.5453123);
-}
-
-float rayStrength(vec2 raySource, vec2 rayRefDirection, vec2 coord,
-                  float seedA, float seedB, float speed) {
-  vec2 sourceToCoord = coord - raySource;
-  vec2 dirNorm = normalize(sourceToCoord);
-  float cosAngle = dot(dirNorm, rayRefDirection);
-
-  float distortedAngle = cosAngle + distortion * sin(iTime * 2.0 + length(sourceToCoord) * 0.01) * 0.2;
-
-  float spreadFactor = pow(max(distortedAngle, 0.0), 1.0 / max(lightSpread, 0.001));
-
-  float distance = length(sourceToCoord);
-  float maxDistance = iResolution.x * rayLength;
-  float lengthFalloff = clamp((maxDistance - distance) / maxDistance, 0.0, 1.0);
-
-  float fadeFalloff = clamp((iResolution.x * fadeDistance - distance) / (iResolution.x * fadeDistance), 0.5, 1.0);
-  float pulse = pulsating > 0.5 ? (0.8 + 0.2 * sin(iTime * speed * 3.0)) : 1.0;
-
-  float baseStrength = clamp(
-    (0.45 + 0.15 * sin(distortedAngle * seedA + iTime * speed)) +
-    (0.3 + 0.2 * cos(-distortedAngle * seedB + iTime * speed)),
-    0.0, 1.0
-  );
-
-  return baseStrength * lengthFalloff * fadeFalloff * spreadFactor * pulse;
-}
-
-void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-  vec2 coord = vec2(fragCoord.x, iResolution.y - fragCoord.y);
-
-  vec2 finalRayDir = rayDir;
-  if (mouseInfluence > 0.0) {
-    vec2 mouseScreenPos = mousePos * iResolution.xy;
-    vec2 mouseDirection = normalize(mouseScreenPos - rayPos);
-    finalRayDir = normalize(mix(rayDir, mouseDirection, mouseInfluence));
-  }
-
-  vec4 rays1 = vec4(1.0) *
-               rayStrength(rayPos, finalRayDir, coord, 36.2214, 21.11349,
-                           1.5 * raysSpeed);
-  vec4 rays2 = vec4(1.0) *
-               rayStrength(rayPos, finalRayDir, coord, 22.3991, 18.0234,
-                           1.1 * raysSpeed);
-
-  fragColor = rays1 * 0.5 + rays2 * 0.4;
-
-  if (noiseAmount > 0.0) {
-    float n = noise(coord * 0.01 + iTime * 0.1);
-    fragColor.rgb *= (1.0 - noiseAmount + noiseAmount * n);
-  }
-
-  float brightness = 1.0 - (coord.y / iResolution.y);
-  fragColor.x *= 0.1 + brightness * 0.8;
-  fragColor.y *= 0.3 + brightness * 0.6;
-  fragColor.z *= 0.5 + brightness * 0.5;
-
-  if (saturation != 1.0) {
-    float gray = dot(fragColor.rgb, vec3(0.299, 0.587, 0.114));
-    fragColor.rgb = mix(vec3(gray), fragColor.rgb, saturation);
-  }
-
-  fragColor.rgb *= raysColor;
-}
-
-void main() {
-  vec4 color;
-  mainImage(color, gl_FragCoord.xy);
-  gl_FragColor  = color;
-}`;
-
-      const uniforms: Uniforms = {
-        iTime: { value: 0 },
-        iResolution: { value: [1, 1] },
-
-        rayPos: { value: [0, 0] },
-        rayDir: { value: [0, 1] },
-
-        raysColor: { value: hexToRgb(raysColor) },
-        raysSpeed: { value: raysSpeed },
-        lightSpread: { value: lightSpread },
-        rayLength: { value: rayLength },
-        pulsating: { value: pulsating ? 1.0 : 0.0 },
-        fadeDistance: { value: fadeDistance },
-        saturation: { value: saturation },
-        mousePos: { value: [0.5, 0.5] },
-        mouseInfluence: { value: mouseInfluence },
-        noiseAmount: { value: noiseAmount },
-        distortion: { value: distortion },
-      };
-      uniformsRef.current = uniforms;
-
-      const geometry = new Triangle(gl);
-      const program = new Program(gl, {
-        vertex: vert,
-        fragment: frag,
-        uniforms,
-      });
-      const mesh = new Mesh(gl, { geometry, program });
-      meshRef.current = mesh;
-
-      const updatePlacement = () => {
-        if (!containerRef.current || !renderer) return;
-
-        renderer.dpr = Math.min(window.devicePixelRatio, 2);
-
-        const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
-        renderer.setSize(wCSS, hCSS);
-
-        const dpr = renderer.dpr;
-        const w = wCSS * dpr;
-        const h = hCSS * dpr;
-
-        uniforms.iResolution.value = [w, h];
-
-        const { anchor, dir } = getAnchorAndDir(raysOrigin, w, h);
-        uniforms.rayPos.value = anchor;
-        uniforms.rayDir.value = dir;
-      };
-
-      const loop = (t: number) => {
-        if (!rendererRef.current || !uniformsRef.current || !meshRef.current) {
-          return;
-        }
-
-        uniforms.iTime.value = t * 0.001;
-
-        if (followMouse && mouseInfluence > 0.0) {
-          const smoothing = 0.92;
-
-          smoothMouseRef.current.x =
-            smoothMouseRef.current.x * smoothing +
-            mouseRef.current.x * (1 - smoothing);
-          smoothMouseRef.current.y =
-            smoothMouseRef.current.y * smoothing +
-            mouseRef.current.y * (1 - smoothing);
-
-          uniforms.mousePos.value = [
-            smoothMouseRef.current.x,
-            smoothMouseRef.current.y,
-          ];
-        }
-
-        try {
-          renderer.render({ scene: mesh });
-          animationIdRef.current = requestAnimationFrame(loop);
-        } catch (error) {
-          console.warn('WebGL rendering error:', error);
-          return;
-        }
-      };
-
-      window.addEventListener('resize', updatePlacement);
-      updatePlacement();
-      animationIdRef.current = requestAnimationFrame(loop);
-
-      cleanupFunctionRef.current = () => {
-        if (animationIdRef.current) {
-          cancelAnimationFrame(animationIdRef.current);
-          animationIdRef.current = null;
-        }
-
-        window.removeEventListener('resize', updatePlacement);
-
-        if (renderer) {
-          try {
-            const canvas = renderer.gl.canvas;
-            const loseContextExt =
-              renderer.gl.getExtension('WEBGL_lose_context');
-            if (loseContextExt) {
-              loseContextExt.loseContext();
-            }
-
-            if (canvas?.parentNode) {
-              canvas.parentNode.removeChild(canvas);
-            }
-          } catch (error) {
-            console.warn('Error during WebGL cleanup:', error);
-          }
-        }
-
-        rendererRef.current = null;
-        uniformsRef.current = null;
-        meshRef.current = null;
-      };
-    };
-
-    initializeWebGL();
-
-    return () => {
-      if (cleanupFunctionRef.current) {
-        cleanupFunctionRef.current();
-        cleanupFunctionRef.current = null;
-      }
-    };
-  }, [
-    isVisible,
-    raysOrigin,
-    raysColor,
-    raysSpeed,
-    lightSpread,
-    rayLength,
-    pulsating,
-    fadeDistance,
-    saturation,
-    followMouse,
-    mouseInfluence,
-    noiseAmount,
-    distortion,
-  ]);
-
-  useEffect(() => {
-    if (!uniformsRef.current || !containerRef.current || !rendererRef.current)
-      return;
-
-    const u = uniformsRef.current;
-    const renderer = rendererRef.current;
-
-    u.raysColor.value = hexToRgb(raysColor);
-    u.raysSpeed.value = raysSpeed;
-    u.lightSpread.value = lightSpread;
-    u.rayLength.value = rayLength;
-    u.pulsating.value = pulsating ? 1.0 : 0.0;
-    u.fadeDistance.value = fadeDistance;
-    u.saturation.value = saturation;
-    u.mouseInfluence.value = mouseInfluence;
-    u.noiseAmount.value = noiseAmount;
-    u.distortion.value = distortion;
-
-    const { clientWidth: wCSS, clientHeight: hCSS } = containerRef.current;
-    const dpr = renderer.dpr;
-    const { anchor, dir } = getAnchorAndDir(raysOrigin, wCSS * dpr, hCSS * dpr);
-    u.rayPos.value = anchor;
-    u.rayDir.value = dir;
-  }, [
-    raysColor,
-    raysSpeed,
-    lightSpread,
-    raysOrigin,
-    rayLength,
-    pulsating,
-    fadeDistance,
-    saturation,
-    mouseInfluence,
-    noiseAmount,
-    distortion,
-  ]);
-
-  useEffect(() => {
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!containerRef.current || !rendererRef.current) return;
-      const rect = containerRef.current.getBoundingClientRect();
-      const x = (e.clientX - rect.left) / rect.width;
-      const y = (e.clientY - rect.top) / rect.height;
-      mouseRef.current = { x, y };
-    };
-
-    if (followMouse) {
-      window.addEventListener('mousemove', handleMouseMove);
-      return () => window.removeEventListener('mousemove', handleMouseMove);
-    }
-  }, [followMouse]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={`pointer-events-none relative z-[3] h-full w-full overflow-hidden ${className}`.trim()}
-    />
-  );
-};
-
-export default LightRays;
diff --git a/apps/website/src/shiki.css b/apps/website/src/shiki.css
index 9b804540ba..4d511dbf6a 100644
--- a/apps/website/src/shiki.css
+++ b/apps/website/src/shiki.css
@@ -14,7 +14,7 @@
   --shiki-highlighted-word-border-color: rgba(169, 169, 169, 0.5);
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --shiki-line-number-color: rgba(209, 209, 209, 0.3);
   --shiki-highlighted-background-color: rgba(209, 209, 209, 0.1);
 
@@ -78,11 +78,11 @@ code .diff::before {
   text-align: right;
 }
 code .diff.add::before {
-  content: "+";
+  content: '+';
   color: var(--shiki-diff-add-sign-color);
 }
 code .diff.remove::before {
-  content: "-";
+  content: '-';
   color: var(--shiki-diff-remove-sign-color);
 }
 
diff --git a/packages/@intlayer/design-system/src/components/IDE/Code.tsx b/packages/@intlayer/design-system/src/components/IDE/Code.tsx
index 587df786a1..0e29aa877f 100644
--- a/packages/@intlayer/design-system/src/components/IDE/Code.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/Code.tsx
@@ -200,7 +200,7 @@ export const Code: FC<CodeCompProps> = ({
     >
       <Container
         className={cn(
-          'relative min-w-0 max-w-full border text-sm leading-6',
+          'relative min-w-0 max-w-full text-sm leading-6',
           showLineNumbers && 'with-line-number ml-0',
           className
         )}
@@ -258,7 +258,9 @@ export const Code: FC<CodeCompProps> = ({
              * supplied, otherwise fall back to the Suspense-based async Shiki
              * renderer.
              */
+
             <CodeBlock lang={language} highlightedHtml={highlightedHtml}>
+              HERE
               {rawCode}
             </CodeBlock>
           )}
diff --git a/packages/@intlayer/design-system/styles/themes.css b/packages/@intlayer/design-system/styles/themes.css
index 86f30b0949..85485c2f96 100644
--- a/packages/@intlayer/design-system/styles/themes.css
+++ b/packages/@intlayer/design-system/styles/themes.css
@@ -3,6 +3,10 @@
 
 :root,
 [data-theme='light'] {
+  .shiki span {
+    color: var(--shiki-light);
+  }
+
   color-scheme: light;
 
   --background: oklch(1 0 0);
@@ -47,6 +51,10 @@
 }
 
 [data-theme='dark'] {
+  .shiki span {
+    color: var(--shiki-dark);
+  }
+
   color-scheme: dark;
 
   --background: oklch(0.145 0 0);

From b2e4460ec7f4fdf3be87e1619ce343e1b8018d90 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Fri, 28 Aug 2026 01:21:15 +0200
Subject: [PATCH 24/32] style(design-system): add browser top bar border and
 fix navbar

---
 .../design-system/src/components/Browser/Browser.tsx          | 2 +-
 .../@intlayer/design-system/src/components/Carousel/index.tsx | 4 ++--
 .../design-system/src/components/Navbar/DesktopNavbar.tsx     | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/@intlayer/design-system/src/components/Browser/Browser.tsx b/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
index a3c28a0f35..c4e4c73c6c 100644
--- a/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
+++ b/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
@@ -352,7 +352,7 @@ export const Browser = ({
       aria-label={ariaLabel ?? content.ariaLabel.value}
     >
       {/* Top bar */}
-      <div className="relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl bg-text/15 px-4 py-2">
+      <div className="relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl border-b bg-text/15 px-4 py-2">
         {/* Navigation Controls */}
         <div className="flex items-center gap-1">
           <Button
diff --git a/packages/@intlayer/design-system/src/components/Carousel/index.tsx b/packages/@intlayer/design-system/src/components/Carousel/index.tsx
index 2c42b63b46..621f1af02f 100644
--- a/packages/@intlayer/design-system/src/components/Carousel/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Carousel/index.tsx
@@ -157,7 +157,7 @@ const CarouselIndicators: FC<CarouselIndicatorsProps> = ({
       <Popover identifier="carousel-prev">
         <Button
           variant="hoverable"
-          color="neutral"
+          color="foreground"
           label={previousSlide.value}
           roundedSize="full"
           onClick={(e) => {
@@ -206,7 +206,7 @@ const CarouselIndicators: FC<CarouselIndicatorsProps> = ({
       <Popover identifier="carousel-next">
         <Button
           variant="hoverable"
-          color="neutral"
+          color="foreground"
           roundedSize="full"
           label={nextSlide.value}
           onClick={(e) => {
diff --git a/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx b/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
index e5a9138358..c88aed37c1 100644
--- a/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
+++ b/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
@@ -102,7 +102,7 @@ export const DesktopNavbar = <T extends TabSelectorItemProps>({
       className="ml-[2vw] h-auto gap-3 overflow-x-auto text-muted-foreground tracking-wide lg:ml-[5vw] lg:gap-3 xl:ml-[10vw] xl:gap-6"
       tabs={sections}
       hoverable
-      color="text"
+      color="light"
     />
 
     <div className="mr-4 flex items-center justify-end gap-2 md:gap-4">

From 22dcda4a414a54b966beafcf0ea34f8b167db22e Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Fri, 28 Aug 2026 18:20:11 +0200
Subject: [PATCH 25/32] refactor(website): fixed doc aside, inputs, and small
 details

---
 apps/app/.env.template                        |   2 +-
 apps/app/package.json                         |   1 +
 .../src/components/ChatBot/FormSection.tsx    |   4 +-
 .../AsideNavigation/AsideNavigation.tsx       |  10 +-
 .../DocPage/DocHeader/DocHeader.tsx           |   2 +-
 .../DocPage/TOCProgressBar/TOCProgressBar.tsx |   4 +-
 .../Analyzer/Results/BundleContentField.tsx   |   2 +-
 .../TableOfContents/TableOfContents.tsx       |  12 +-
 bun.lock                                      | 109 +-----------------
 .../src/components/HeightResizer/index.tsx    |   5 +-
 .../src/components/Input/Input.tsx            |   2 +-
 .../src/components/TextArea/TextArea.tsx      |   2 +-
 12 files changed, 28 insertions(+), 127 deletions(-)

diff --git a/apps/app/.env.template b/apps/app/.env.template
index 1a61a02932..3407681ba9 100644
--- a/apps/app/.env.template
+++ b/apps/app/.env.template
@@ -71,4 +71,4 @@ VITE_STRIPE_ONE_TIME_PAYMENT_PRICE_ID=
 # Election                                                                              #
 #######################################################################################
 
-GH_TOKEN=
\ No newline at end of file
+GH_TOKEN=
diff --git a/apps/app/package.json b/apps/app/package.json
index 13a45e711c..764e902ba7 100644
--- a/apps/app/package.json
+++ b/apps/app/package.json
@@ -68,6 +68,7 @@
     "@tanstack/react-table": "9.2.4",
     "@tanstack/react-virtual": "3.14.10",
     "@tanstack/router-plugin": "1.168.35",
+    "@tanstack/start-static-server-functions": "^1.167.32",
     "defu": "6.1.7",
     "framer-motion": "13.1.1",
     "fuse.js": "7.5.0",
diff --git a/apps/website/src/components/ChatBot/FormSection.tsx b/apps/website/src/components/ChatBot/FormSection.tsx
index c1968a27ec..6d7c52fd47 100644
--- a/apps/website/src/components/ChatBot/FormSection.tsx
+++ b/apps/website/src/components/ChatBot/FormSection.tsx
@@ -159,7 +159,7 @@ export const FormSection: FC<FormSectionProps> = ({
         <FormButton
           label={clearButton.label.value}
           type="button"
-          color="text"
+          color="foreground"
           variant="outline"
           size="icon-md"
           disabled={isSubmitting || isLoading || !hasClearButton}
@@ -171,7 +171,7 @@ export const FormSection: FC<FormSectionProps> = ({
         <FormButton
           label={sendQuestionButton.label.value}
           type="submit"
-          color="text"
+          color="foreground"
           isLoading={isSubmitting || isLoading}
           Icon={ArrowUp}
           size="icon-md"
diff --git a/apps/website/src/components/DocPage/AsideNavigation/AsideNavigation.tsx b/apps/website/src/components/DocPage/AsideNavigation/AsideNavigation.tsx
index 4c286049c6..96cde6bd1f 100644
--- a/apps/website/src/components/DocPage/AsideNavigation/AsideNavigation.tsx
+++ b/apps/website/src/components/DocPage/AsideNavigation/AsideNavigation.tsx
@@ -27,11 +27,9 @@ export const AsideNavigation: FC = () => {
     <>
       <div className="relative flex min-h-0 w-70 flex-1 flex-col">
         <div className="relative z-10 mt-10 flex w-full flex-row items-center pt-2">
-          <h2 className="ml-3 text-nowrap text-neutral/80 text-sm uppercase">
+          <h2 className="ml-3 text-nowrap font-mono text-foreground text-sm uppercase">
             {title}
           </h2>
-
-          <div className="absolute bottom-0 left-0 h-8 w-full translate-y-full bg-linear-to-b from-background/90 backdrop-blur" />
         </div>
         <div className="relative flex min-h-0 w-full flex-1 overflow-hidden rounded-2xl md:pt-0">
           <div className="mt-4 flex pl-3">
@@ -40,14 +38,14 @@ export const AsideNavigation: FC = () => {
           <HeightResizer
             initialHeight={250}
             isDisabled={isMobile}
-            className="absolute bottom-0 left-0 size-full bg-background/70 backdrop-blur"
+            className="absolute bottom-0 left-0 size-full bg-background"
           >
             <div className="justify-bottom size-full text-sm">
               <ChatBot
                 additionalButtons={
                   <Button
                     Icon={MoveDiagonal}
-                    color="text"
+                    color="foreground"
                     size="icon-md"
                     variant="outline"
                     label={button.label.value}
@@ -66,7 +64,7 @@ export const AsideNavigation: FC = () => {
         size="xl"
         onClose={() => setIsModalOpen(false)}
         roundedSize="2xl"
-        className="relative m-auto h-[calc(95vh-100px)] overflow-hidden"
+        className="relative m-auto h-[calc(95vh-100px)] overflow-hidden border bg-background blur-none backdrop-blur-none"
         disableScroll
         hasCloseButton
       >
diff --git a/apps/website/src/components/DocPage/DocHeader/DocHeader.tsx b/apps/website/src/components/DocPage/DocHeader/DocHeader.tsx
index 09b3f145f0..24320be08c 100644
--- a/apps/website/src/components/DocPage/DocHeader/DocHeader.tsx
+++ b/apps/website/src/components/DocPage/DocHeader/DocHeader.tsx
@@ -179,7 +179,7 @@ export const DocHeader: FC<DocHeaderProps> = ({
           )}
         </div>
       </header>
-      <Container className="sticky top-10 z-10 mx-auto mt-5 flex max-w-3xl flex-col gap-2 px-4 py-2 max-md:overflow-x-auto">
+      <Container className="sticky top-10 z-10 mx-auto mt-5 flex max-w-3xl flex-col gap-2 border px-4 py-2 max-md:overflow-x-auto">
         <div className="flex w-full flex-row justify-between gap-4">
           <div className="flex w-full shrink flex-row items-center justify-start gap-4">
             {!isMobile && applicationTemplate && (
diff --git a/apps/website/src/components/DocPage/TOCProgressBar/TOCProgressBar.tsx b/apps/website/src/components/DocPage/TOCProgressBar/TOCProgressBar.tsx
index 74a8cc513c..65bafd31e3 100644
--- a/apps/website/src/components/DocPage/TOCProgressBar/TOCProgressBar.tsx
+++ b/apps/website/src/components/DocPage/TOCProgressBar/TOCProgressBar.tsx
@@ -65,8 +65,8 @@ export const TOCProgressBar: FC = () => {
             <span
               className={`h-0.5 w-4.5 rounded-full transition-all duration-300 ${
                 isActive
-                  ? 'bg-text'
-                  : 'bg-neutral/40 group-hover:bg-neutral/80 dark:bg-neutral-600 dark:group-hover:bg-neutral-300'
+                  ? 'bg-foreground'
+                  : 'bg-muted-foreground/40 group-hover:bg-muted-foreground/80'
               }`}
             />
           </button>
diff --git a/apps/website/src/components/ScannerPage/Analyzer/Results/BundleContentField.tsx b/apps/website/src/components/ScannerPage/Analyzer/Results/BundleContentField.tsx
index c09fe4ed83..fc28000042 100644
--- a/apps/website/src/components/ScannerPage/Analyzer/Results/BundleContentField.tsx
+++ b/apps/website/src/components/ScannerPage/Analyzer/Results/BundleContentField.tsx
@@ -63,7 +63,7 @@ const TH: FC<{ children: ReactNode; right?: boolean }> = ({
 }) => (
   <th
     className={cn(
-      'px-3 pt-3 pb-2 font-medium text-neutral/60 text-xs',
+      'px-3 pt-3 pb-2 font-medium text-foreground text-xs',
       right ? 'text-right' : 'text-left'
     )}
   >
diff --git a/apps/website/src/components/TableOfContents/TableOfContents.tsx b/apps/website/src/components/TableOfContents/TableOfContents.tsx
index 432aed028e..6b610789d2 100644
--- a/apps/website/src/components/TableOfContents/TableOfContents.tsx
+++ b/apps/website/src/components/TableOfContents/TableOfContents.tsx
@@ -66,12 +66,12 @@ const NavTitlesChildren: FC<NavTitlesChildrenProps> = ({
               variant="hoverable"
               className={cn(
                 'flex flex-1 items-center justify-between text-wrap p-2 pr-4 text-base transition-colors',
-                depth === 1 && 'text-neutral/75 text-sm',
-                depth === 2 && 'text-neutral/60 text-sm',
-                depth === 3 && 'text-neutral/50 text-sm',
-                depth === 4 && 'text-neutral/40 text-xs',
-                depth === 5 && 'text-neutral/30 text-xs',
-                depth === 6 && 'text-neutral/20 text-xs'
+                depth === 1 && 'text-muted-foreground/75 text-sm',
+                depth === 2 && 'text-muted-foreground/60 text-sm',
+                depth === 3 && 'text-muted-foreground/50 text-sm',
+                depth === 4 && 'text-muted-foreground/40 text-xs',
+                depth === 5 && 'text-muted-foreground/30 text-xs',
+                depth === 6 && 'text-muted-foreground/20 text-xs'
               )}
             >
               {title}
diff --git a/bun.lock b/bun.lock
index ea12c05024..a92a56ba1e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -66,6 +66,7 @@
         "@tanstack/react-table": "9.2.4",
         "@tanstack/react-virtual": "3.14.10",
         "@tanstack/router-plugin": "1.168.35",
+        "@tanstack/start-static-server-functions": "^1.167.32",
         "defu": "6.1.7",
         "framer-motion": "13.1.1",
         "fuse.js": "7.5.0",
@@ -4200,39 +4201,11 @@
 
     "@nestjs/testing": ["@nestjs/testing@11.1.6", "", { "dependencies": { "tslib": "2.8.1" }, "peerDependencies": { "@nestjs/common": "^11.0.0", "@nestjs/core": "^11.0.0", "@nestjs/microservices": "^11.0.0", "@nestjs/platform-express": "^11.0.0" }, "optionalPeers": ["@nestjs/microservices", "@nestjs/platform-express"] }, "sha512-srYzzDNxGvVCe1j0SpTS9/ix75PKt6Sn6iMaH1rpJ6nj2g8vwNrhK0CoJJXvpCYgrnI+2WES2pprYnq8rAMYHA=="],
 
-    "@next/bundle-analyzer": ["@next/bundle-analyzer@16.2.0", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-3F8T1KYVWKBLUXzZPpYSYp134c3iwzNDMxfOE0kkqST+S5VaYao41F0SQogd6E4Od7+C3ReA/XJMDDw9P61n6w=="],
+    "@next/bundle-analyzer": ["@next/bundle-analyzer@15.5.18", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-v5/UNFwYbBlRQg/Bt+wU65XuxCxPu1AeCOI6s4s6Cludsj7FdVO9E9uzr7GIj8OykSrYtGuEQAUX0Ulje8W2yw=="],
 
     "@next/env": ["@next/env@16.3.1", "", {}, "sha512-35G3xwkQUb2oETSDjFXGrVugknoayLFBh7vSE+yAcl9IP2zT9wyGwq7297AYHR11kJld807t5f8AJBs6WBzXsQ=="],
 
-    "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.2.6", "", { "dependencies": { "fast-glob": "3.3.1" } }, "sha512-Z8l6o4JWKUl755x4R+wogD86KPeU+Ckw4K+SYG4kHeOJtRenDeK+OSbGcqZpDtbwn9DsJVdir2UxmwXuinUbUw=="],
-
-    "@next/rspack-binding": ["@next/rspack-binding@1.0.3", "", { "optionalDependencies": { "@next/rspack-binding-android-arm-eabi": "1.0.3", "@next/rspack-binding-android-arm64": "1.0.3", "@next/rspack-binding-darwin-arm64": "1.0.3", "@next/rspack-binding-darwin-x64": "1.0.3", "@next/rspack-binding-linux-arm-gnueabihf": "1.0.3", "@next/rspack-binding-linux-arm64-gnu": "1.0.3", "@next/rspack-binding-linux-arm64-musl": "1.0.3", "@next/rspack-binding-linux-x64-gnu": "1.0.3", "@next/rspack-binding-linux-x64-musl": "1.0.3", "@next/rspack-binding-win32-arm64-msvc": "1.0.3", "@next/rspack-binding-win32-ia32-msvc": "1.0.3", "@next/rspack-binding-win32-x64-msvc": "1.0.3" } }, "sha512-y42fIcY2Fz0RKgMJt8R9c0Asrp09Evwkkd3RpWaWXhongFlP34IGcF6YuCkZESLywkkrgNalZT8hzYNeq0QYXw=="],
-
-    "@next/rspack-binding-android-arm-eabi": ["@next/rspack-binding-android-arm-eabi@1.0.3", "", { "os": "android", "cpu": "arm" }, "sha512-iyl9QipZl7osUbhi9GNRbZbzTQB//wvRXk6uwMSmRTYGdbSP8lKkZBjso9S5ijAubN1ulRIhe55kl8BzrmhlBA=="],
-
-    "@next/rspack-binding-android-arm64": ["@next/rspack-binding-android-arm64@1.0.3", "", { "os": "android", "cpu": "arm64" }, "sha512-VTHUVNHWbD2HwM/hxEqiiN/X1O/rMfWbDGM+2eL1V2w3H6r5KmKC6V4m/iZJwhknxgRVxQ4R205TCD34OLEfkA=="],
-
-    "@next/rspack-binding-darwin-arm64": ["@next/rspack-binding-darwin-arm64@1.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-i311ThFKKunMxSrYW6TEK+IRUzIvgyYUTkDuDF5+VTm6haoaX9XFyjkUT0lz/3g8LFJBnI20BJpsY6kNXQSb8Q=="],
-
-    "@next/rspack-binding-darwin-x64": ["@next/rspack-binding-darwin-x64@1.0.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-5JUKbG7i59lvaMUm/EYO/T9ukTcWg+daELvHJpnyeRQ3QOZO8lBG8V/qiY5cPUOtxU3D3U3nYfR4TNsAn2K0ew=="],
-
-    "@next/rspack-binding-linux-arm-gnueabihf": ["@next/rspack-binding-linux-arm-gnueabihf@1.0.3", "", { "os": "linux", "cpu": "arm" }, "sha512-CotyzAc/XMVBq/Ju0eeFqVJeLk5YgBf/qnY0pTiEIf/mqfr1/BWOkbnFtHt/SO6jzVSWIAC33iZ3TLfXn3bvyQ=="],
-
-    "@next/rspack-binding-linux-arm64-gnu": ["@next/rspack-binding-linux-arm64-gnu@1.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-jcXWBqE+usDtN4mxenWsfu9Krd7+lBaL977G1nx00M9PXQZX8M52V6TLTVpADIOUa6HfAhGCg0QPhIap8lG1gg=="],
-
-    "@next/rspack-binding-linux-arm64-musl": ["@next/rspack-binding-linux-arm64-musl@1.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-p8CvSpz1tP/kewuPfi513RBDdoWyInqK3d8tVWJbUzxhwjMEc95+4w+OzvEDMlioN5azq3l4mVCm/sWH0qBqOg=="],
-
-    "@next/rspack-binding-linux-x64-gnu": ["@next/rspack-binding-linux-x64-gnu@1.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SViZ7oKgR7Ps+SyhJ0WsQyLxTTw2m0SE2KiepadxmKOPmaich8hj5trUKHefXg5cBPJ5eKAtOozpCNpLD0JdRg=="],
-
-    "@next/rspack-binding-linux-x64-musl": ["@next/rspack-binding-linux-x64-musl@1.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-XEwJWAUhipCGFYb2m1bNZy8uR/rhrGTeezCkZ4qBR3CmZpuGkAS4BBJrMaROmo+hZ73xFNAO+iXLoEacISooqw=="],
-
-    "@next/rspack-binding-win32-arm64-msvc": ["@next/rspack-binding-win32-arm64-msvc@1.0.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-QR6VH6rf2uRmVoqJ3SCmTqdqMPFpXWfUDrpKTce4Ud9U/SpTRAcYkfeA1pIvypCU68vhgk+0/6vR6GPeN0aR7A=="],
-
-    "@next/rspack-binding-win32-ia32-msvc": ["@next/rspack-binding-win32-ia32-msvc@1.0.3", "", { "os": "win32", "cpu": "ia32" }, "sha512-ylVnRMayUex5kfe7nBo6mum6mSBhaTeCJnr9Carmi+7/3h03MXD8HRkWupfpsAYjkpQU+vskONgVvZ/9mNS4oA=="],
-
-    "@next/rspack-binding-win32-x64-msvc": ["@next/rspack-binding-win32-x64-msvc@1.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-fED9bUmsqRqtfQENWZhbnwTkWyWYL6oLoqM0IiASpzB4khBlxBlbPqFhXB5IJWzFHuYbLNfjuJh7SU9k8Rih2Q=="],
-
-    "@next/rspack-core": ["@next/rspack-core@1.0.3", "", { "dependencies": { "@next/rspack-binding": "1.0.3", "@rspack/core": "2.0.4" } }, "sha512-4EDUKhRIuljVhTDjy8DqGvTrWrZIFUHffdAThSB3OAEyCPm+pgM3JedSodm00Od5ox0PpsZ0nWY2sbwsJofg2A=="],
+    "@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.3.0", "", { "dependencies": { "@eslint-community/eslint-utils": "4.9.1", "fast-glob": "3.3.1" } }, "sha512-OqgJ8PN0d04KcPhDX/PTY5tJUJZxlbrt7O7FBsm4XE0XW2JDrKnDXsc9uo9WUimJGPoo2j+JRGhyXApC//mvbw=="],
 
     "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-ABMIu2zQ7cnNIHm5ivKGwZwUrm0pAai3yiJ/gK/rF1c1VP9UOnj7XECbMKFdVKp9I9eMYq9NoDs1WXOoowxzJw=="],
 
@@ -6890,7 +6863,7 @@
 
     "eslint": ["eslint@10.8.1", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.2", "@eslint/config-array": "^0.23.5", "@eslint/config-helpers": "^0.7.0", "@eslint/core": "^1.2.1", "@eslint/plugin-kit": "^0.7.2", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.14.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^9.1.2", "eslint-visitor-keys": "^5.0.1", "espree": "^11.2.0", "esquery": "^1.7.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "minimatch": "^10.2.5", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-wqA7W2jbsC/BnV9Iv1UZpKVFkO1AdNoSmYW8NWG4HNOBbkAMvIqDZ27pI2f07dqn583NcIC44ckjAcOXDL1QbQ=="],
 
-    "eslint-config-next": ["eslint-config-next@16.2.6", "", { "dependencies": { "@next/eslint-plugin-next": "16.2.6", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-z2ELYSkyrrJ6cuunTU8vhsT/RpouPkjaSah06nVW6Rg2Hpg0Vs8s497/e5s8G8qtdp4ccsiovz5P1rv+5VSW2Q=="],
+    "eslint-config-next": ["eslint-config-next@16.3.0", "", { "dependencies": { "@next/eslint-plugin-next": "16.3.0", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-lPrf1kHsMJEZqO0uXkNB400c5MGrhrTk3BNX7P0ol4gt61+iUlQfjy9TyIOEA9eOXrf+5+mYbT/JsY8+zqUByQ=="],
 
     "eslint-config-react-app": ["eslint-config-react-app@7.0.1", "", { "dependencies": { "@babel/core": "^7.16.0", "@babel/eslint-parser": "^7.16.3", "@rushstack/eslint-patch": "^1.1.0", "@typescript-eslint/eslint-plugin": "^5.5.0", "@typescript-eslint/parser": "^5.5.0", "babel-preset-react-app": "^10.0.1", "confusing-browser-globals": "^1.0.11", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.25.3", "eslint-plugin-jest": "^25.3.0", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.27.1", "eslint-plugin-react-hooks": "^4.3.0", "eslint-plugin-testing-library": "^5.0.1" }, "peerDependencies": { "eslint": "^8.0.0" } }, "sha512-K6rNzvkIeHaTd8m/QEh1Zko0KI7BACWkkneSs6s9cKZC/J27X3eZR6Upt1jkmZ/4FK+XUOPPxMEN7+lbUXfSlA=="],
 
@@ -7446,8 +7419,6 @@
 
     "intlayer-editor": ["intlayer-editor@workspace:packages/intlayer-editor"],
 
-    "intlayer-next-16": ["intlayer-next-16@workspace:examples/nextjs-16-app"],
-
     "intlayer-next-no-lolale-path": ["intlayer-next-no-lolale-path@workspace:examples/next-no-lolale-path"],
 
     "intlayer-nuxt-4": ["intlayer-nuxt-4@workspace:examples/nuxt-4-app"],
@@ -8236,8 +8207,6 @@
 
     "next-intlayer": ["next-intlayer@workspace:packages/next-intlayer"],
 
-    "next-rspack": ["next-rspack@16.3.0", "", { "dependencies": { "@next/rspack-core": "1.0.3" } }, "sha512-VGTrFDuQNXD8clu+i3uhT6lIKDvsQ3tSp2Q5Q/W71EfH0pidZmAsxtwT6EOfOWlQU6AyEEk/UmtGytvzCQCvbQ=="],
-
     "nextjs-15-app": ["nextjs-15-app@workspace:examples/nextjs-15-app"],
 
     "nextjs-app-14-example": ["nextjs-app-14-example@workspace:examples/nextjs-14-app"],
@@ -11100,8 +11069,6 @@
 
     "@next/eslint-plugin-next/fast-glob": ["fast-glob@3.3.1", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg=="],
 
-    "@next/rspack-core/@rspack/core": ["@rspack/core@2.0.4", "", { "dependencies": { "@rspack/binding": "2.0.4" }, "peerDependencies": { "@module-federation/runtime-tools": "^0.24.1 || ^2.0.0", "@swc/helpers": ">=0.5.1" }, "optionalPeers": ["@module-federation/runtime-tools", "@swc/helpers"] }, "sha512-OuxdQeeKWQpNvFBRDOcnoSaQvp6E4APM/6JJMM/k0p6oL1TEFQVGdNu3VGY4mRAsebnNBXapMVMhj+v66Bn2pg=="],
-
     "@ngtools/webpack/@angular/compiler-cli": ["@angular/compiler-cli@19.2.25", "", { "dependencies": { "@babel/core": "7.26.9", "@jridgewell/sourcemap-codec": "^1.4.14", "chokidar": "^4.0.0", "convert-source-map": "^1.5.1", "reflect-metadata": "^0.2.0", "semver": "^7.0.0", "tslib": "^2.3.0", "yargs": "^17.2.1" }, "peerDependencies": { "@angular/compiler": "19.2.25", "typescript": ">=5.5 <5.9" }, "bin": { "ngc": "bundles/src/bin/ngc.js", "ngcc": "bundles/ngcc/index.js", "ng-xi18n": "bundles/src/bin/ng_xi18n.js" } }, "sha512-IBBKRz6ua+y6bdcaUIpOPq7G/S4biJfcT1TCMD7wi+48wiKKSXj4J/8BN5fSjt+UozlHwya3B8z0XqnwO2ywZw=="],
 
     "@npmcli/git/npm-pick-manifest": ["npm-pick-manifest@11.0.3", "", { "dependencies": { "npm-install-checks": "^8.0.0", "npm-normalize-package-bin": "^5.0.0", "npm-package-arg": "^13.0.0", "semver": "^7.3.5" } }, "sha512-buzyCfeoGY/PxKqmBqn1IUJrZnUi1VVJTdSSRPGI60tJdUhUoSQFhs0zycJokDdOznQentgrpf8LayEHyyYlqQ=="],
@@ -12130,10 +12097,6 @@
 
     "intlayer-editor/typescript": ["typescript@7.0.2", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.2", "@typescript/typescript-darwin-arm64": "7.0.2", "@typescript/typescript-darwin-x64": "7.0.2", "@typescript/typescript-freebsd-arm64": "7.0.2", "@typescript/typescript-freebsd-x64": "7.0.2", "@typescript/typescript-linux-arm": "7.0.2", "@typescript/typescript-linux-arm64": "7.0.2", "@typescript/typescript-linux-loong64": "7.0.2", "@typescript/typescript-linux-mips64el": "7.0.2", "@typescript/typescript-linux-ppc64": "7.0.2", "@typescript/typescript-linux-riscv64": "7.0.2", "@typescript/typescript-linux-s390x": "7.0.2", "@typescript/typescript-linux-x64": "7.0.2", "@typescript/typescript-netbsd-arm64": "7.0.2", "@typescript/typescript-netbsd-x64": "7.0.2", "@typescript/typescript-openbsd-arm64": "7.0.2", "@typescript/typescript-openbsd-x64": "7.0.2", "@typescript/typescript-sunos-x64": "7.0.2", "@typescript/typescript-win32-arm64": "7.0.2", "@typescript/typescript-win32-x64": "7.0.2" }, "bin": { "tsc": "bin/tsc" } }, "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA=="],
 
-    "intlayer-next-16/next": ["next@16.3.0", "", { "dependencies": { "@next/env": "16.3.0", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.5.23", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.3.0", "@next/swc-darwin-x64": "16.3.0", "@next/swc-linux-arm64-gnu": "16.3.0", "@next/swc-linux-arm64-musl": "16.3.0", "@next/swc-linux-x64-gnu": "16.3.0", "@next/swc-linux-x64-musl": "16.3.0", "@next/swc-win32-arm64-msvc": "16.3.0", "@next/swc-win32-x64-msvc": "16.3.0", "sharp": "^0.35.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-NEdGOzH+08eTXMUp9UYkA99Nhi5N6Thrhc1jgFOQgfgnGK/dA2hRwBpXep+exdFQrnwlRf/3Wixyp8lLBUpE2A=="],
-
-    "intlayer-next-no-lolale-path/eslint-config-next": ["eslint-config-next@16.3.0", "", { "dependencies": { "@next/eslint-plugin-next": "16.3.0", "eslint-import-resolver-node": "^0.3.6", "eslint-import-resolver-typescript": "^3.5.2", "eslint-plugin-import": "^2.32.0", "eslint-plugin-jsx-a11y": "^6.10.0", "eslint-plugin-react": "^7.37.0", "eslint-plugin-react-hooks": "^7.0.0", "globals": "16.4.0", "typescript-eslint": "^8.46.0" }, "peerDependencies": { "eslint": ">=9.0.0", "typescript": ">=3.3.1" }, "optionalPeers": ["typescript"] }, "sha512-lPrf1kHsMJEZqO0uXkNB400c5MGrhrTk3BNX7P0ol4gt61+iUlQfjy9TyIOEA9eOXrf+5+mYbT/JsY8+zqUByQ=="],
-
     "intlayer-next-no-lolale-path/next": ["next@16.3.0", "", { "dependencies": { "@next/env": "16.3.0", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.5.23", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.3.0", "@next/swc-darwin-x64": "16.3.0", "@next/swc-linux-arm64-gnu": "16.3.0", "@next/swc-linux-arm64-musl": "16.3.0", "@next/swc-linux-x64-gnu": "16.3.0", "@next/swc-linux-x64-musl": "16.3.0", "@next/swc-win32-arm64-msvc": "16.3.0", "@next/swc-win32-x64-msvc": "16.3.0", "sharp": "^0.35.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-NEdGOzH+08eTXMUp9UYkA99Nhi5N6Thrhc1jgFOQgfgnGK/dA2hRwBpXep+exdFQrnwlRf/3Wixyp8lLBUpE2A=="],
 
     "intlayer-nuxt-4/vue": ["vue@3.5.38", "", { "dependencies": { "@vue/compiler-dom": "3.5.38", "@vue/compiler-sfc": "3.5.38", "@vue/runtime-dom": "3.5.38", "@vue/server-renderer": "3.5.38", "@vue/shared": "3.5.38" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-vAMKHfImQlYSy0C+PBue4s3ERZ2xGKfgZg5GXAsLInq1dyh2H78ILVP5sK0KPFPVW4kv+OGCIvBEondcjpZp7A=="],
@@ -12590,8 +12553,6 @@
 
     "next-intlayer/typescript": ["typescript@7.0.2", "", { "optionalDependencies": { "@typescript/typescript-aix-ppc64": "7.0.2", "@typescript/typescript-darwin-arm64": "7.0.2", "@typescript/typescript-darwin-x64": "7.0.2", "@typescript/typescript-freebsd-arm64": "7.0.2", "@typescript/typescript-freebsd-x64": "7.0.2", "@typescript/typescript-linux-arm": "7.0.2", "@typescript/typescript-linux-arm64": "7.0.2", "@typescript/typescript-linux-loong64": "7.0.2", "@typescript/typescript-linux-mips64el": "7.0.2", "@typescript/typescript-linux-ppc64": "7.0.2", "@typescript/typescript-linux-riscv64": "7.0.2", "@typescript/typescript-linux-s390x": "7.0.2", "@typescript/typescript-linux-x64": "7.0.2", "@typescript/typescript-netbsd-arm64": "7.0.2", "@typescript/typescript-netbsd-x64": "7.0.2", "@typescript/typescript-openbsd-arm64": "7.0.2", "@typescript/typescript-openbsd-x64": "7.0.2", "@typescript/typescript-sunos-x64": "7.0.2", "@typescript/typescript-win32-arm64": "7.0.2", "@typescript/typescript-win32-x64": "7.0.2" }, "bin": { "tsc": "bin/tsc" } }, "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA=="],
 
-    "nextjs-15-app/@next/bundle-analyzer": ["@next/bundle-analyzer@15.5.18", "", { "dependencies": { "webpack-bundle-analyzer": "4.10.1" } }, "sha512-v5/UNFwYbBlRQg/Bt+wU65XuxCxPu1AeCOI6s4s6Cludsj7FdVO9E9uzr7GIj8OykSrYtGuEQAUX0Ulje8W2yw=="],
-
     "nextjs-15-app/next": ["next@15.5.18", "", { "dependencies": { "@next/env": "15.5.18", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.5.18", "@next/swc-darwin-x64": "15.5.18", "@next/swc-linux-arm64-gnu": "15.5.18", "@next/swc-linux-arm64-musl": "15.5.18", "@next/swc-linux-x64-gnu": "15.5.18", "@next/swc-linux-x64-musl": "15.5.18", "@next/swc-win32-arm64-msvc": "15.5.18", "@next/swc-win32-x64-msvc": "15.5.18", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-eKL8zUJkX9Y5lE+RX/2YJoItVdGlIscyVyboeD9wSpp0PaGqjoA4tTpT2qPqz9ax+5IzGESyLSeZ/RCwbSZ2uQ=="],
 
     "nextjs-app-14-example/@types/node": ["@types/node@25.8.0", "", { "dependencies": { "undici-types": ">=7.24.0 <7.24.7" } }, "sha512-TCFSk8IZh+iLX1xtksoBVtdmgL+1IX0fC9BeU4QqFSuNdN/K+HUlhqOzEmSYYpZUVsLYcPqc9KX+60iDuninSQ=="],
@@ -16248,8 +16209,6 @@
 
     "@nestjs/schematics/@angular-devkit/schematics/rxjs": ["rxjs@7.8.1", "", { "dependencies": { "tslib": "^2.1.0" } }, "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg=="],
 
-    "@next/rspack-core/@rspack/core/@rspack/binding": ["@rspack/binding@2.0.4", "", { "optionalDependencies": { "@rspack/binding-darwin-arm64": "2.0.4", "@rspack/binding-darwin-x64": "2.0.4", "@rspack/binding-linux-arm64-gnu": "2.0.4", "@rspack/binding-linux-arm64-musl": "2.0.4", "@rspack/binding-linux-x64-gnu": "2.0.4", "@rspack/binding-linux-x64-musl": "2.0.4", "@rspack/binding-wasm32-wasi": "2.0.4", "@rspack/binding-win32-arm64-msvc": "2.0.4", "@rspack/binding-win32-ia32-msvc": "2.0.4", "@rspack/binding-win32-x64-msvc": "2.0.4" } }, "sha512-/QeJDPUw/lWkBJESG264KA9u6/rAjvoJhKncU4rkTi5Ap45kue5HTgOzr0ufxKdd2Xl72fjFBuqlKmtFDD5LiQ=="],
-
     "@ngtools/webpack/@angular/compiler-cli/@angular/compiler": ["@angular/compiler@19.2.25", "", { "dependencies": { "tslib": "^2.3.0" } }, "sha512-GGEeTTd/DV71E07K0u5753bxXozc6Z7iWaCZJDW7xiA7hdHCwrYBMz1PVUJAtXcxf4wTdiXQR48kw8/YHYnDAw=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core": ["@babel/core@7.26.9", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.9", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.9", "@babel/parser": "^7.26.9", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.9", "@babel/types": "^7.26.9", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-lWBYIrF7qK5+GjY5Uy+/hEgp8OJWOD/rpy74GplYRhEauvbHDeFB8t5hPOZxCZ0Oxf4Cc36tK51/l3ymJysrKw=="],
@@ -17746,13 +17705,13 @@
 
     "babel-preset-expo/@babel/generator/@babel/types": ["@babel/types@7.29.8", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg=="],
 
-    "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
+    "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/core": ["@babel/core@7.26.10", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.10", "@babel/types": "^7.26.10", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.29.7", "", {}, "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-generator-functions/@babel/traverse": ["@babel/traverse@7.29.8", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.8", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.8", "@babel/template": "^7.29.7", "@babel/types": "^7.29.8", "debug": "^4.3.1" } }, "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg=="],
 
-    "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
+    "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/core": ["@babel/core@7.26.10", "", { "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", "@babel/generator": "^7.26.10", "@babel/helper-compilation-targets": "^7.26.5", "@babel/helper-module-transforms": "^7.26.0", "@babel/helpers": "^7.26.10", "@babel/parser": "^7.26.10", "@babel/template": "^7.26.9", "@babel/traverse": "^7.26.10", "@babel/types": "^7.26.10", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ=="],
 
     "babel-preset-expo/@babel/plugin-transform-async-to-generator/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.29.7", "", {}, "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw=="],
 
@@ -18210,32 +18169,6 @@
 
     "ignore-walk/minimatch/brace-expansion": ["brace-expansion@5.0.9", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-ScQ4IuvIEF1TMlP7Zt+vjJ//9zlPb2SDcxWxM3bk8s6t6GGdJ7KO1dCcTidOPJKePW30LE/2cT7wCyPho9/Wxg=="],
 
-    "intlayer-next-16/next/@next/env": ["@next/env@16.3.0", "", {}, "sha512-o9r1S0BNiNreHP9Vs+Qnqd9kviDkJh8xIACY7UFZSmiGbbQRzPBBosvHzAU4TULHOIuOj/18RSsyz2qrREmIFw=="],
-
-    "intlayer-next-16/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-55hpqq18bEVAlxedlTt3tFqZmKg2nUXT1kn1G/BGEy0R13h3LwtwHPVzzjG6P4LLeOHE32PFDQUVaJEWvBEZBw=="],
-
-    "intlayer-next-16/next/@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.3.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-SOi96kSaF5T+0wW4koiM1bWzSPwjzTesC1p3df+FjdOi5LIQkBK/blxh7HdoKnNuI4PURF1OO7TZqtfnbWDSgw=="],
-
-    "intlayer-next-16/next/@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.3.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-P0gZAoPMF4dyTRzhmkV4PrqVzSOB6t4mC1oI3c4dqijJ+OVEVx5clIXAKR4/uQpsqw2KKM/0D5tVumcR2r5blg=="],
-
-    "intlayer-next-16/next/@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.3.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-tXXGKJw0m37O0eKJARVTX/TheKPhz0QFVtVVZXmOig+9YKLQOSP6hvf2pxv5DO7CLEJyTHx3Pg043CDQkv1G4Q=="],
-
-    "intlayer-next-16/next/@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.3.0", "", { "os": "linux", "cpu": "x64" }, "sha512-pjGxK5EY7yWml78ALejFkWmgHsU7wbFQrISiugpH6FbUJhgEvw3xFZ/EBAtLl7QtL0WdQKiG9eWJ3mOKGTukHw=="],
-
-    "intlayer-next-16/next/@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.3.0", "", { "os": "linux", "cpu": "x64" }, "sha512-sjo++Xx+lomlPs3HRsHWhVDyGG6ms1kGW5EtHLERdII8AyG1i+f6aq68xHREO6AEMlhjTNEWBSmfJfqm9orf7g=="],
-
-    "intlayer-next-16/next/@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.3.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-C5JSgiO54wURdaxdEUIXqkz04uMqC9UmPX1gtDrV/5Tf1UowdWYI8uA5hfFbPolTlp0q4KZ60xlHePNibf0VIw=="],
-
-    "intlayer-next-16/next/@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.3.0", "", { "os": "win32", "cpu": "x64" }, "sha512-fDOggsweNb5SSw0ZKVk6U+gxSyGFFlIBY/LBc1r8GUj4u/6t6oArL+Pmkg0MBnsgR+KkdsURilVH4F3GXUGepA=="],
-
-    "intlayer-next-16/next/@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
-
-    "intlayer-next-16/next/postcss": ["postcss@8.5.23", "", { "dependencies": { "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-g50586zr4bZmwFiTlflMu8E0bDTb5I5gertgwAKmsdUlTQIhZtunzUlD1WSzwcVWPoAVpsrA6vlfCD7oXvRwgg=="],
-
-    "intlayer-next-no-lolale-path/eslint-config-next/@next/eslint-plugin-next": ["@next/eslint-plugin-next@16.3.0", "", { "dependencies": { "@eslint-community/eslint-utils": "4.9.1", "fast-glob": "3.3.1" } }, "sha512-OqgJ8PN0d04KcPhDX/PTY5tJUJZxlbrt7O7FBsm4XE0XW2JDrKnDXsc9uo9WUimJGPoo2j+JRGhyXApC//mvbw=="],
-
-    "intlayer-next-no-lolale-path/eslint-config-next/globals": ["globals@16.4.0", "", {}, "sha512-ob/2LcVVaVGCYN+r14cnwnoDPUufjiYgSqRhiFD0Q1iI4Odora5RE8Iv1D24hAz5oMophRGkGz+yuvQmmUMnMw=="],
-
     "intlayer-next-no-lolale-path/next/@next/env": ["@next/env@16.3.0", "", {}, "sha512-o9r1S0BNiNreHP9Vs+Qnqd9kviDkJh8xIACY7UFZSmiGbbQRzPBBosvHzAU4TULHOIuOj/18RSsyz2qrREmIFw=="],
 
     "intlayer-next-no-lolale-path/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.3.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-55hpqq18bEVAlxedlTt3tFqZmKg2nUXT1kn1G/BGEy0R13h3LwtwHPVzzjG6P4LLeOHE32PFDQUVaJEWvBEZBw=="],
@@ -21946,26 +21879,6 @@
 
     "@nestjs/platform-express/express/body-parser/type-is": ["type-is@2.1.0", "", { "dependencies": { "content-type": "^2.0.0", "media-typer": "^1.1.0", "mime-types": "^3.0.0" } }, "sha512-faYHw0anBbc/kWF3zFTEnxSFOAGUX9GFbOBthvDdLsIlEoWOFOtS0zgCiQYwIskL9iGXZL3kAXD8OoZ4GmMATA=="],
 
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-darwin-arm64": ["@rspack/binding-darwin-arm64@2.0.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-0Q1QXFEsZfDc4opiDnb8q50KlBbC2VovViDaYlMJZBzvjAo325mh3itXPfz7YZ31M+TxRE7TUiJXH3ltiV1Hdg=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-darwin-x64": ["@rspack/binding-darwin-x64@2.0.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-oO5J2QYf7+H+aYRj85EiGrDOoDEE9EDDl7NgXv46iWvIF0wXowEHXqnjMFxHxRq2Vf6scT+0yYQX9blWcvMWAA=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-arm64-gnu": ["@rspack/binding-linux-arm64-gnu@2.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-BEk6mIYBK4BihW9qXXITJORrVXecTlkRjrqhgefili4xjXtLdcUnxAm9sN/2oJ8m378n2h33qDh4gr2orPBFWQ=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-arm64-musl": ["@rspack/binding-linux-arm64-musl@2.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-Hyt3z1RwNcSMIoaoWLN4Hb/696/O5JPukf8rXQASvf2UkC+X3ij7tr+8lMSYi3Zysi1QL375CnT4fNoABEW0JA=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-x64-gnu": ["@rspack/binding-linux-x64-gnu@2.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-xHorBPBZAg0Pn9Q0k9dWZ9euowieDxcSOzQ9JhTCmhDY6wZH5M/kCBFlCs/OQeW5/NUArW3x3MwEdO/0QJHMxg=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-linux-x64-musl": ["@rspack/binding-linux-x64-musl@2.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-QLxEGUXofF0kVNU12Y2NT3Qi9lGs+WbnYpapVeb+2IXtrAXJfU7Rhy7lAp5GLMzYMQNrKKL9SVnTWKbODbNW9Q=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi": ["@rspack/binding-wasm32-wasi@2.0.4", "", { "dependencies": { "@emnapi/core": "1.10.0", "@emnapi/runtime": "1.10.0", "@napi-rs/wasm-runtime": "1.1.4" }, "cpu": "none" }, "sha512-YhN8HkiH46ONU9tm5dyoXDImDWGpU7E4SPqGI4OyAVF0445uIChurIUmTIOYcD6cg81GGeIjozWJOcb635Dcqw=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-arm64-msvc": ["@rspack/binding-win32-arm64-msvc@2.0.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-MUlYIz82xQRN0aoiXXyEBrNVUwiOSSFRi7nuCgUKduaSdlbPWzCY31IdtOygZ06LVp5JIGUEtyqSrjQq4FrMRw=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-ia32-msvc": ["@rspack/binding-win32-ia32-msvc@2.0.4", "", { "os": "win32", "cpu": "ia32" }, "sha512-D7UcIFMzlY2yhhyuW4Ej15gBWmTwUM5DxuObl3Kv31qRv/pmV3MsqUeG5m2dqLbUxzqPH87qnp0cArbkJQ1b+w=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-win32-x64-msvc": ["@rspack/binding-win32-x64-msvc@2.0.4", "", { "os": "win32", "cpu": "x64" }, "sha512-MnYKPfdrAEbtpKg/1SZ6cNtzreIRyQJK4APbxLLPXENdTH5QXQkaTjLMKEeJcJ51FRhI/+yNpOUm2oTHdCQ1Og=="],
-
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame": ["@babel/code-frame@7.29.7", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/generator": ["@babel/generator@7.29.8", "", { "dependencies": { "@babel/parser": "^7.29.8", "@babel/types": "^7.29.8", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg=="],
@@ -23544,8 +23457,6 @@
 
     "ignore-walk/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
-    "intlayer-next-no-lolale-path/eslint-config-next/@next/eslint-plugin-next/fast-glob": ["fast-glob@3.3.1", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.4" } }, "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg=="],
-
     "intlayer-nuxt-4/vue/@vue/compiler-dom/@vue/compiler-core": ["@vue/compiler-core@3.5.38", "", { "dependencies": { "@babel/parser": "^7.29.7", "@vue/shared": "3.5.38", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-s99aGxWYig9ErHbct27KXEGhrBYlRI6c4MwAgXErOAbX9xiW37/uMa+XUDO69zLz83dng8UUZ70CTOJrLrYrEQ=="],
 
     "intlayer-nuxt-4/vue/@vue/compiler-sfc/@babel/parser": ["@babel/parser@7.29.8", "", { "dependencies": { "@babel/types": "^7.29.8" }, "bin": "./bin/babel-parser.js" }, "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA=="],
@@ -25052,12 +24963,6 @@
 
     "@nestjs/cli/glob/minimatch/brace-expansion/balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
 
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
-
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
-
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
 
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/code-frame/js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
@@ -26254,8 +26159,6 @@
 
     "@joshwooding/vite-plugin-react-docgen-typescript/glob/jackspeak/@isaacs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.3", "", {}, "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg=="],
 
-    "@next/rspack-core/@rspack/core/@rspack/binding/@rspack/binding-wasm32-wasi/@emnapi/core/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
-
     "@ngtools/webpack/@angular/compiler-cli/@babel/core/@babel/helper-compilation-targets/lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
 
     "@ngtools/webpack/@angular/compiler-cli/yargs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
diff --git a/packages/@intlayer/design-system/src/components/HeightResizer/index.tsx b/packages/@intlayer/design-system/src/components/HeightResizer/index.tsx
index c68d9cfa87..79d1aaf18a 100644
--- a/packages/@intlayer/design-system/src/components/HeightResizer/index.tsx
+++ b/packages/@intlayer/design-system/src/components/HeightResizer/index.tsx
@@ -250,10 +250,9 @@ export const HeightResizer: FC<PropsWithChildren<HeightResizerProps>> = ({
     <div
       className={cn(
         'relative h-full w-full border-dashed transition',
+        !isDisabled && 'max-h-[80%] cursor-ns-resize border-t-[1px]',
         !isDisabled &&
-          'max-h-[80%] cursor-ns-resize border-neutral-200 border-t-[1px] dark:border-neutral-950',
-        !isDisabled &&
-          'before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-1 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-neutral-200 before:transition before:content-[""] dark:before:bg-neutral-950',
+          'before:absolute before:top-0 before:left-1/2 before:z-10 before:block before:h-1 before:w-10 before:-translate-x-1/2 before:-translate-y-1/2 before:transform before:cursor-ns-resize before:rounded-full before:bg-muted-foreground before:transition before:content-[""]',
         !isDisabled &&
           'active:border-neutral-400 active:before:bg-neutral-400 dark:active:border-neutral-600 active:dark:before:bg-neutral-600',
         className
diff --git a/packages/@intlayer/design-system/src/components/Input/Input.tsx b/packages/@intlayer/design-system/src/components/Input/Input.tsx
index dd746fbda8..6e6c49c027 100644
--- a/packages/@intlayer/design-system/src/components/Input/Input.tsx
+++ b/packages/@intlayer/design-system/src/components/Input/Input.tsx
@@ -21,7 +21,7 @@ export const inputVariants = cva(
       variant: {
         default: [
           'text-foreground',
-          'bg-neutral-50 dark:bg-neutral-950',
+          'bg-accent',
           'ring-text/20',
 
           // Focus ring
diff --git a/packages/@intlayer/design-system/src/components/TextArea/TextArea.tsx b/packages/@intlayer/design-system/src/components/TextArea/TextArea.tsx
index 364dadf156..1a162359de 100644
--- a/packages/@intlayer/design-system/src/components/TextArea/TextArea.tsx
+++ b/packages/@intlayer/design-system/src/components/TextArea/TextArea.tsx
@@ -1,7 +1,7 @@
 import { cn } from '@utils/cn';
 import type { VariantProps } from 'class-variance-authority';
 import type { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';
-import { inputVariants } from '../Input';
+import { type InputVariant, inputVariants } from '../Input';
 
 /**
  * Props for the TextArea component.

From 8bee1d1d6b28e5c1d6d4410535a0536e954f7fe9 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Fri, 28 Aug 2026 20:23:01 +0200
Subject: [PATCH 26/32] style(design-system): fixed betterstack widget theme

---
 .../src/components/DocPage/DocBreadCrumb.tsx  |  2 +-
 .../src/components/Breadcrumb/index.tsx       |  8 +++---
 .../src/components/Footer/index.tsx           | 12 ++-------
 .../src/components/Status/index.tsx           | 26 +++++++++++++++++++
 4 files changed, 33 insertions(+), 15 deletions(-)
 create mode 100644 packages/@intlayer/design-system/src/components/Status/index.tsx

diff --git a/apps/website/src/components/DocPage/DocBreadCrumb.tsx b/apps/website/src/components/DocPage/DocBreadCrumb.tsx
index 06ed590867..3a897b8722 100644
--- a/apps/website/src/components/DocPage/DocBreadCrumb.tsx
+++ b/apps/website/src/components/DocPage/DocBreadCrumb.tsx
@@ -61,7 +61,7 @@ export const DocBreadCrumb: FC<DocBreadCrumbProps> = ({
       className="mt-12 ml-3 text-xs"
       locale={locale}
       size="xs"
-      color="neutral"
+      color="text"
       {...props}
     />
   );
diff --git a/packages/@intlayer/design-system/src/components/Breadcrumb/index.tsx b/packages/@intlayer/design-system/src/components/Breadcrumb/index.tsx
index 7362ceb422..7bbe2e22a3 100644
--- a/packages/@intlayer/design-system/src/components/Breadcrumb/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Breadcrumb/index.tsx
@@ -59,7 +59,7 @@ const getColorClass = (color?: LinkColor | `${LinkColor}`): string => {
     neutral: 'text-neutral',
     light: 'text-white',
     dark: 'text-neutral-800',
-    text: 'text-foreground',
+    text: 'text-muted-foreground',
     'text-inverse': 'text-foreground-opposite',
     error: 'text-error',
     success: 'text-success',
@@ -200,7 +200,7 @@ const Span: FC<SpanProps> = ({ children, position, className, ...props }) => (
     itemProp="item"
     className={cn(
       'inline-flex items-center',
-      'font-medium text-neutral-700',
+      'font-medium text-muted-foreground',
       'transition-colors duration-200',
       className
     )}
@@ -369,7 +369,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({
               aria-current={ariaCurrent}
               className={cn(
                 'transition-colors duration-200',
-                isActive && 'text-neutral-900'
+                isActive && 'text-foreground'
               )}
             >
               {text}
@@ -385,7 +385,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({
                 position={index + 1}
                 locale={locale}
                 aria-current={ariaCurrent}
-                className={cn(isActive && 'cursor-default text-neutral-900')}
+                className={cn(isActive && 'cursor-default text-foreground')}
               >
                 {text}
               </LinkLink>
diff --git a/packages/@intlayer/design-system/src/components/Footer/index.tsx b/packages/@intlayer/design-system/src/components/Footer/index.tsx
index 00ef6cde4c..4ae8fb68c4 100644
--- a/packages/@intlayer/design-system/src/components/Footer/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Footer/index.tsx
@@ -1,3 +1,4 @@
+import { Status } from '@components/Status';
 import type { FC, ReactNode } from 'react';
 import { LogoWithTextBelow } from '../Logo';
 import { SocialNetworks } from '../SocialNetworks';
@@ -133,16 +134,7 @@ export const Footer: FC<FooterProps> = ({ links, footerText }) => (
           {footerText}
         </span>
       )}
-      <div className="w-43">
-        <iframe
-          src="https://status.intlayer.org/badge?theme=dark"
-          height="30"
-          frameBorder="0"
-          scrolling="no"
-          style={{ colorScheme: 'normal' }}
-        />
-      </div>
-
+      <Status />
       <div className="flex flex-row gap-3">
         <SocialNetworks />
       </div>
diff --git a/packages/@intlayer/design-system/src/components/Status/index.tsx b/packages/@intlayer/design-system/src/components/Status/index.tsx
new file mode 100644
index 0000000000..bb008add73
--- /dev/null
+++ b/packages/@intlayer/design-system/src/components/Status/index.tsx
@@ -0,0 +1,26 @@
+import { useTheme } from '@providers/ThemeProvider';
+import cn from 'cnfast';
+import type { FC } from 'react';
+
+export const Status: FC<{ className?: string }> = ({ className, ...props }) => {
+  const { theme, resolvedTheme } = useTheme();
+  return (
+    <div
+      {...props}
+      className={cn('w-full max-w-[200px] overflow-hidden rounded', className)}
+    >
+      <iframe
+        title="Badge"
+        src={`https://status.intlayer.org/badge?theme=${resolvedTheme}`}
+        height="30"
+        frameBorder="0"
+        scrolling="no"
+        style={{
+          width: '100%',
+          colorScheme: 'light',
+        }}
+        allowTransparency
+      />
+    </div>
+  );
+};

From be013c59c646370820164c8d504b1a4ef30833bd Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Fri, 28 Aug 2026 23:31:38 +0200
Subject: [PATCH 27/32] refactor(website): rebuilt the faq section with design
 system accordion

---
 .../CommonQuestions.tsx                       | 224 ++----------------
 .../CommonQuestionsOld.tsx                    |  99 ++++++++
 .../LandingPage/HeroSection/index.tsx         |  57 ++---
 3 files changed, 150 insertions(+), 230 deletions(-)
 create mode 100644 apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestionsOld.tsx

diff --git a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
index e03ac85a5a..d26b8685c0 100644
--- a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
+++ b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
@@ -1,164 +1,42 @@
-import { MaxHeightSmoother } from '@intlayer/design-system/max-height-smoother';
+import { Accordion } from '@intlayer/design-system/accordion';
 import { Website_FrequentQuestions_Path } from '@intlayer/design-system/routes';
-import { cn } from '@intlayer/design-system/utils';
-import { ArrowRight, ChevronDown } from 'lucide-react';
-import { type FC, useMemo, useState, useSyncExternalStore } from 'react';
+import { ArrowRight } from 'lucide-react';
+import type { FC } from 'react';
 import { type IntlayerNode, useIntlayer } from 'react-intlayer';
 import { BackgroundLayout } from '~/components/BackgroundLayout';
 import { Link } from '~/components/Link/Link';
 
-const QuestionItem: FC<{
-  question: IntlayerNode;
-  answer: IntlayerNode;
-  callToAction?: { label: IntlayerNode; url: IntlayerNode };
-  numberOfColumns: number;
-}> = ({ question, answer, callToAction, numberOfColumns }) => {
-  // Deterministic minHeight based on question length and column count
-  // This avoids random values and hydration mismatches
-  const minHeight = useMemo(() => {
-    const seed = question.value.length;
-    if (numberOfColumns > 2) {
-      return (seed % 150) + 75;
-    }
-    if (numberOfColumns === 2) {
-      return (seed % 50) + 100;
-    }
-    return 90;
-  }, [numberOfColumns, question.value]);
-
-  return (
-    <div className="rounded-sm border bg-card">
-      <MaxHeightSmoother
-        isOverable
-        isFocusable
-        minHeight={minHeight}
-        id={question.value}
-      >
-        <div
-          className={cn(
-            'px-2 pt-3 sm:px-6',
-            numberOfColumns === 1 && 'w-[85vw]',
-            numberOfColumns === 2 && 'w-[40vw]',
-            numberOfColumns === 3 && 'w-[20vw]'
-            /* What ? why not a grid */
-          )}
-        >
-          <h3 className="text-wrap pb-4 font-bold text-base" itemProp="name">
-            {question}
-          </h3>
-
-          <div
-            itemProp="acceptedAnswer"
-            itemScope
-            itemType="https://schema.org/Answer"
-            className="text-muted-foreground leading-8"
-          >
-            <span itemProp="text">{answer}</span>
-            {callToAction && (
-              <Link
-                to={callToAction.url.value}
-                label={callToAction.label.value}
-                color="text"
-                className="text-sm"
-              >
-                {callToAction.label}
-              </Link>
-            )}
-          </div>
-        </div>
-      </MaxHeightSmoother>
-    </div>
-  );
-};
-
-// Helper function to distribute items into a given number of columns.
-// It uses an object (via Object.fromEntries) to create keys 0 .. numColumns-1,
-// then assigns each item based on its index modulo numColumns.
-const distributeItemsIntoColumns = <T,>(
-  items: T[],
-  numColumns: number
-): T[][] => {
-  const columnsObj: { [key: number]: T[] } = Object.fromEntries(
-    Array.from({ length: numColumns }, (_, i) => [i, []])
-  );
-  items.forEach((item, index) => {
-    // This round-robin distribution effectively separates even (pair) and odd (impair)
-    // indexes across all columns.
-    const columnIndex = index % numColumns;
-    columnsObj[columnIndex].push(item);
-  });
-  return Object.values(columnsObj);
-};
-
-// Custom hook to determine the number of columns based on window width.
-// You can tweak the breakpoints as needed.
-const useResponsiveColumns = (): number => {
-  return useSyncExternalStore(
-    (callback) => {
-      window.addEventListener('resize', callback);
-      return () => window.removeEventListener('resize', callback);
-    },
-    () => {
-      const width = window.innerWidth;
-      if (width < 600) return 1;
-      if (width < 1024) return 2;
-      return 3;
-    },
-    () => 2
-  );
-};
-
 const FAQItem: FC<{
   question: IntlayerNode;
   answer: IntlayerNode;
   callToAction?: { label: IntlayerNode; url: IntlayerNode };
 }> = ({ question, answer, callToAction }) => {
-  const [open, setOpen] = useState(false);
   return (
-    <button
-      type="button"
-      onClick={() => setOpen((x) => !x)}
-      data-open={open}
-      className="group flex w-full cursor-pointer flex-col px-3 py-1 hover:bg-accent data-[open=true]:py-3"
-    >
-      <div className="flex w-full items-center justify-between gap-3">
-        <p itemProp="name">{question}</p>
-
-        <ChevronDown
-          data-open={open}
-          className="size-5 origin-center text-muted-foreground transition-transform duration-200 data-[open=true]:rotate-180"
-        />
-      </div>
-
+    <Accordion label={''} header={question} defaultIsOpen={false}>
       <div
-        data-open={open}
-        className={`grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-300 ease-out data-[open=true]:grid-rows-[1fr] data-[open=true]:opacity-100`}
+        itemProp="acceptedAnswer"
+        itemScope
+        itemType="https://schema.org/Answer"
+        className="overflow-hidden px-8 pb-4"
       >
-        <div
-          itemProp="acceptedAnswer"
-          itemScope
-          itemType="https://schema.org/Answer"
-          className="overflow-hidden"
+        <p
+          itemProp="text"
+          className="pt-2 text-left text-[15px] text-muted-foreground leading-5"
         >
-          <p
-            itemProp="text"
-            className="pt-2 text-left text-[15px] text-muted-foreground leading-5"
-          >
-            {answer}
-            {callToAction && (
-              <Link
-                to={callToAction.url.value}
-                label={callToAction.label.value}
-                color="text"
-                className="text-sm"
-              >
-                {callToAction.label}
-              </Link>
-            )}
-          </p>
-        </div>
+          {answer}
+          {callToAction && (
+            <Link
+              to={callToAction.url.value}
+              label={callToAction.label.value}
+              color="text"
+              className="text-sm"
+            >
+              {callToAction.label}
+            </Link>
+          )}
+        </p>
       </div>
-    </button>
+    </Accordion>
   );
 };
 
@@ -175,7 +53,7 @@ export const CommonQuestionsSection: FC = () => {
       <div
         itemScope
         itemType="https://schema.org/FAQPage"
-        className="my-3 flex w-full max-w-2xl flex-col items-start justify-center gap-x-6 overflow-hidden rounded-xl border bg-background [&>button:not(:first-child)]:border-t"
+        className="my-3 flex w-full max-w-2xl flex-col items-start justify-center gap-x-6 overflow-hidden rounded-xl border bg-background p-4"
       >
         {content.map((data) => (
           <FAQItem key={data.question} {...data} />
@@ -198,55 +76,3 @@ export const CommonQuestionsSection: FC = () => {
     </section>
   );
 };
-
-export const CommonQuestionsSectionOld: FC = () => {
-  const { content, title, allFrequentQuestionLink } =
-    useIntlayer('common-questions');
-
-  // Determine the number of columns based on the current breakpoint.
-  const numberOfColumns = useResponsiveColumns();
-
-  // Distribute the content items into columns.
-  const columns = distributeItemsIntoColumns(content as any[], numberOfColumns);
-
-  return (
-    <section className="m-auto flex w-full max-w-6xl flex-col items-center justify-center p-16">
-      <h2 className="text-3xl">{title}</h2>
-
-      <div
-        itemScope
-        itemType="https://schema.org/FAQPage"
-        className="my-3 flex w-full flex-row items-start justify-center gap-x-6"
-      >
-        {columns.map((column, colIndex) => (
-          <div
-            key={column[0]?.question.value ?? `column-${colIndex}`}
-            className="flex flex-col gap-6"
-          >
-            {column.map((props) => (
-              <QuestionItem
-                key={props.question.value}
-                numberOfColumns={numberOfColumns}
-                {...props}
-              />
-            ))}
-          </div>
-        ))}
-      </div>
-
-      <Link
-        to={Website_FrequentQuestions_Path}
-        label={allFrequentQuestionLink.label.value}
-        color="text"
-        variant="button"
-        roundedSize="full"
-        className="flex w-auto"
-      >
-        <span className="flex items-center gap-2">
-          {allFrequentQuestionLink.text}
-          <ArrowRight className="size-4" />
-        </span>
-      </Link>
-    </section>
-  );
-};
diff --git a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestionsOld.tsx b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestionsOld.tsx
new file mode 100644
index 0000000000..c81252e77f
--- /dev/null
+++ b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestionsOld.tsx
@@ -0,0 +1,99 @@
+import { MaxHeightSmoother } from '@intlayer/design-system/max-height-smoother';
+import { Website_FrequentQuestions_Path } from '@intlayer/design-system/routes';
+import { cn } from '@intlayer/design-system/utils';
+import { ArrowRight, ChevronDown } from 'lucide-react';
+import { type FC, useMemo, useState, useSyncExternalStore } from 'react';
+import { type IntlayerNode, useIntlayer } from 'react-intlayer';
+import { BackgroundLayout } from '~/components/BackgroundLayout';
+import { Link } from '~/components/Link/Link';
+
+const FAQItem: FC<{
+  question: IntlayerNode;
+  answer: IntlayerNode;
+  callToAction?: { label: IntlayerNode; url: IntlayerNode };
+}> = ({ question, answer, callToAction }) => {
+  const [open, setOpen] = useState(false);
+  return (
+    <button
+      type="button"
+      onClick={() => setOpen((x) => !x)}
+      data-open={open}
+      className="group flex w-full cursor-pointer flex-col px-3 py-1 hover:bg-accent data-[open=true]:py-3"
+    >
+      <div className="flex w-full items-center justify-between gap-3">
+        <p itemProp="name">{question}</p>
+
+        <ChevronDown
+          data-open={open}
+          className="size-5 origin-center text-muted-foreground transition-transform duration-200 data-[open=true]:rotate-180"
+        />
+      </div>
+
+      <div
+        data-open={open}
+        className={`grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-300 ease-out data-[open=true]:grid-rows-[1fr] data-[open=true]:opacity-100`}
+      >
+        <div
+          itemProp="acceptedAnswer"
+          itemScope
+          itemType="https://schema.org/Answer"
+          className="overflow-hidden"
+        >
+          <p
+            itemProp="text"
+            className="pt-2 text-left text-[15px] text-muted-foreground leading-5"
+          >
+            {answer}
+            {callToAction && (
+              <Link
+                to={callToAction.url.value}
+                label={callToAction.label.value}
+                color="text"
+                className="text-sm"
+              >
+                {callToAction.label}
+              </Link>
+            )}
+          </p>
+        </div>
+      </div>
+    </button>
+  );
+};
+
+export const CommonQuestionsSection: FC = () => {
+  const { content, title, allFrequentQuestionLink } =
+    useIntlayer('common-questions');
+
+  return (
+    <section className="relative flex w-full flex-col items-center justify-center gap-8 p-16">
+      <BackgroundLayout />
+
+      <h2 className="text-3xl">{title}</h2>
+
+      <div
+        itemScope
+        itemType="https://schema.org/FAQPage"
+        className="my-3 flex w-full max-w-2xl flex-col items-start justify-center gap-x-6 overflow-hidden rounded-xl border bg-background [&>button:not(:first-child)]:border-t"
+      >
+        {content.map((data) => (
+          <FAQItem key={data.question} {...data} />
+        ))}
+      </div>
+
+      <Link
+        to={Website_FrequentQuestions_Path}
+        label={allFrequentQuestionLink.label.value}
+        color="text"
+        variant="button"
+        roundedSize="full"
+        className="flex w-auto"
+      >
+        <span className="flex items-center gap-2">
+          {allFrequentQuestionLink.text}
+          <ArrowRight className="size-4" />
+        </span>
+      </Link>
+    </section>
+  );
+};
diff --git a/apps/website/src/components/LandingPage/HeroSection/index.tsx b/apps/website/src/components/LandingPage/HeroSection/index.tsx
index 3fbade27b7..14899b5313 100644
--- a/apps/website/src/components/LandingPage/HeroSection/index.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/index.tsx
@@ -21,7 +21,6 @@ import type { FC } from 'react';
 import { useIntlayer } from 'react-intlayer';
 import { BackgroundLayout } from '~/components/BackgroundLayout';
 import { Link } from '~/components/Link/Link';
-import { useTheme } from '~/providers/ThemeProvider';
 import packageJSON from '../../../../package_mock.json' with { type: 'json' };
 import { TechLogos } from './TechLogos';
 
@@ -41,32 +40,30 @@ export const HeroSection: FC = () => {
     copyButton,
   } = useIntlayer('hero-section');
 
-  const { resolvedTheme } = useTheme();
-  const isDarkMode = resolvedTheme === 'dark';
   const { isCopied, copy } = useCopyToClipboard('npx intlayer init');
 
   return (
-    <section className="relative flex min-h-[calc(100vh-60px)] flex-col">
-      <section className="relative flex w-full flex-1 flex-col border-b px-4 md:px-8 lg:px-12">
+    <section className="relative flex min-h-[calc(100dvh-60px)] flex-col">
+      <section className="relative flex w-full flex-1 flex-col border-b px-4 sm:px-6 md:px-8 lg:px-12">
         <BackgroundLayout />
-        <div className="flex flex-1 flex-col items-center justify-center py-16">
+        <div className="flex flex-1 flex-col items-center justify-center py-10 sm:py-16">
           {SHOW_WHATS_NEW && (
             <motion.div
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
-              className="mb-8 flex items-center justify-center gap-2"
+              className="mb-6 flex items-center justify-center gap-2 sm:mb-8"
             >
               <Link to={Website_ReleasesV9_Path} label={whatsNewLabel.value}>
                 <Tag
                   size="md"
                   border="with"
-                  className="flex items-center gap-2 rounded-full border-foreground/20! bg-card/10 font-medium text-foreground text-sm backdrop-blur-xl"
+                  className="flex items-center gap-2 rounded-full border-foreground/20! bg-card/10 font-medium text-foreground text-xs backdrop-blur-xl sm:text-sm"
                 >
-                  <Megaphone className="size-4" />
-                  <span className="no-underline! flex items-center gap-1 font-medium text-sm sm:text-sm">
+                  <Megaphone className="size-3.5 shrink-0 sm:size-4" />
+                  <span className="no-underline! flex items-center gap-1 whitespace-nowrap font-medium text-xs sm:text-sm">
                     {version} v{packageJSON.version}{' '}
-                    <ArrowRight className="size-3" />
+                    <ArrowRight className="size-3 shrink-0" />
                   </span>
                 </Tag>
               </Link>
@@ -74,7 +71,7 @@ export const HeroSection: FC = () => {
           )}
 
           {/* Title */}
-          <h1 className="mb-3 text-center font-bold text-4xl leading-tight sm:text-4xl md:text-5xl lg:text-6xl">
+          <h1 className="mb-3 px-2 text-center font-bold text-3xl leading-tight sm:text-4xl md:text-5xl lg:text-6xl">
             {title}
           </h1>
           {/* Subtitle */}
@@ -82,7 +79,7 @@ export const HeroSection: FC = () => {
             initial={{ filter: 'blur(10px)', opacity: 0, y: 30 }}
             animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.5 }}
-            className="mb-6 text-center font-semibold text-xl sm:text-3xl md:text-3xl lg:mb-8 lg:text-4xl"
+            className="mb-6 px-2 text-center font-semibold text-lg leading-snug sm:text-2xl md:text-3xl lg:mb-8 lg:text-4xl"
           >
             {subheading}
           </motion.h2>
@@ -94,13 +91,12 @@ export const HeroSection: FC = () => {
             animate={{ opacity: 1, y: -30 }}
             transition={{ delay: 0.7, duration: 0.6 }}
             onClick={copy}
-            className="mt-8 flex w-full max-w-xl cursor-pointer flex-row items-center justify-center rounded-lg border bg-card p-1 py-2 pr-2 pl-4"
+            className="mt-8 flex w-full max-w-xl cursor-pointer flex-row items-center justify-between gap-1 overflow-hidden rounded-lg border bg-card p-1 py-2 pr-2 pl-3 sm:pl-4"
           >
-            <ChevronRight className="size-8 text-muted-foreground" />
+            <ChevronRight className="size-6 shrink-0 text-muted-foreground sm:size-8" />
             <CodeBlock
-              className="justify-center"
+              className="min-w-0 flex-1 justify-center overflow-x-auto whitespace-nowrap text-sm sm:text-base"
               lang="bash"
-              isDarkMode={isDarkMode}
             >
               npx intlayer init
             </CodeBlock>
@@ -112,13 +108,14 @@ export const HeroSection: FC = () => {
               onClick={copy}
               Icon={isCopied ? Check : Copy}
               label={copyButton.value}
+              className="shrink-0"
             />
           </motion.div>
           <motion.p
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.6, duration: 0.6 }}
-            className="mx-auto max-w-xl text-center text-muted-foreground text-sm leading-relaxed sm:text-lg lg:mb-12"
+            className="mx-auto mt-4 mb-8 max-w-xl px-2 text-center text-muted-foreground text-sm leading-relaxed sm:text-lg lg:mb-12"
           >
             {description}
           </motion.p>
@@ -128,7 +125,7 @@ export const HeroSection: FC = () => {
             initial={{ opacity: 0, y: 30 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ delay: 0.8, duration: 0.6 }}
-            className="flex flex-col justify-center gap-3 sm:flex-row sm:gap-4"
+            className="flex w-full max-w-xs flex-col justify-center gap-3 sm:max-w-none sm:flex-row sm:gap-4"
           >
             <Link
               to={External_Github}
@@ -137,7 +134,8 @@ export const HeroSection: FC = () => {
               label={supportButton.value}
               isExternalLink={false}
               size="lg"
-              roundedSize="sm"
+              roundedSize="full"
+              className="w-full sm:w-auto"
             >
               <span className="block text-sm sm:text-lg">{supportButton}</span>
             </Link>
@@ -148,8 +146,8 @@ export const HeroSection: FC = () => {
               color="text"
               label={getStartedButton.value}
               size="xl"
-              roundedSize="sm"
-              className="flex flex-row items-center justify-center gap-2"
+              roundedSize="full"
+              className="flex w-full flex-row items-center justify-center gap-2 sm:w-auto"
             >
               <span className="block text-sm sm:text-lg">
                 {getStartedButton}
@@ -160,20 +158,17 @@ export const HeroSection: FC = () => {
           </motion.div>
         </div>
       </section>
-      <Link to={Website_Doc_Environment_ViteAndReact_Path} label={availableFor}>
-        <div className="flex items-center justify-between gap-4 border-b p-3">
-          <p className="font-mono text-foreground text-sm uppercase tracking-wider sm:text-base">
-            {availableFor}
-          </p>
-          <ExternalLink className="size-5 text-muted-foreground" />
-        </div>
-      </Link>
+      <div className="flex items-center justify-between gap-4 border-b px-4 py-3">
+        <p className="truncate font-mono text-foreground text-xs uppercase tracking-wider sm:text-sm md:text-base">
+          {availableFor}
+        </p>
+      </div>
 
       <motion.section
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         transition={{ delay: 1.0, duration: 0.6 }}
-        className="relative w-full border-b"
+        className="relative w-full overflow-x-auto border-b"
       >
         <TechLogos />
       </motion.section>

From 972b177d1e21d11c2410de98e3953749ca98c53f Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Fri, 28 Aug 2026 23:32:57 +0200
Subject: [PATCH 28/32] fix(website): missing structured data

---
 .../LandingPage/CommonQuestionsSection/CommonQuestions.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
index d26b8685c0..c9aaa8e4fb 100644
--- a/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
+++ b/apps/website/src/components/LandingPage/CommonQuestionsSection/CommonQuestions.tsx
@@ -12,7 +12,12 @@ const FAQItem: FC<{
   callToAction?: { label: IntlayerNode; url: IntlayerNode };
 }> = ({ question, answer, callToAction }) => {
   return (
-    <Accordion label={''} header={question} defaultIsOpen={false}>
+    <Accordion
+      itemProp="name"
+      label={question}
+      header={question}
+      defaultIsOpen={false}
+    >
       <div
         itemProp="acceptedAnswer"
         itemScope

From ef5b37d51384c54fad8746bbf4eb74d752b9dc71 Mon Sep 17 00:00:00 2001
From: aymericzip <ay.pineau@gmail.com>
Date: Fri, 28 Aug 2026 23:03:34 -0600
Subject: [PATCH 29/32] refactor(website): adjust redesign

---
 .../AdminPage/AdminUsers/UserAdminPage.tsx    |   2 +-
 .../DashboardOverview/DashboardAudience.tsx   |   4 +-
 apps/app/src/components/PricingPage/index.tsx |   2 +-
 .../ReviewerProfilePage/ContactChat.tsx       |   2 +-
 .../src/components/SwitchThemeSwitcher.tsx    |   2 +-
 .../SwitchThemeSwitcher.tsx                   |   2 +-
 .../TranslationStatusAside.tsx                |   2 +-
 .../src/components/I18nBenchmark/index.tsx    |   2 +-
 .../LandingPage/AuditSection/index.tsx        |   2 +-
 .../AvailableTechnoSection/index.tsx          |   2 +-
 .../LandingPage/DemoSection/index.tsx         |   2 +-
 .../LandingPage/FeaturesSection/index.tsx     |   2 +-
 .../HeroSection/hero-section.content.ts       |  20 --
 .../LandingPage/HeroSection/index.tsx         |  81 ++---
 .../LandingPage/ProductsSection/index.tsx     |   2 +-
 .../WhyToChoseIntlayerSection/index.tsx       |   2 +-
 .../src/components/LandingPage/index.tsx      |   2 +-
 .../src/components/LandingSwitcher.tsx        |  98 ------
 apps/website/src/routes/{-$locale}/index.tsx  |   6 +-
 .../src/components/Button/Button.tsx          |  59 ++--
 .../ContentEditorView/TextEditor.tsx          |   6 +-
 .../src/components/Footer/index.tsx           |   2 +-
 .../design-system/src/components/IDE/Code.tsx |   2 -
 .../design-system/src/components/IDE/IDE.tsx  |   2 +-
 .../LanguageBackground/LanguageSection.tsx    |   1 -
 .../src/components/Link/Link.tsx              | 135 +++----
 .../LocaleSwitcherContent.tsx                 |   2 +-
 .../src/components/Navbar/DesktopNavbar.tsx   |   2 +-
 .../@intlayer/design-system/styles/fonts.css  |   7 -
 .../design-system/styles/globals.css          | 330 +++++++++++++++---
 .../@intlayer/design-system/styles/themes.css |  99 ------
 31 files changed, 434 insertions(+), 450 deletions(-)
 delete mode 100644 apps/website/src/components/LandingSwitcher.tsx
 delete mode 100644 packages/@intlayer/design-system/styles/fonts.css
 delete mode 100644 packages/@intlayer/design-system/styles/themes.css

diff --git a/apps/app/src/components/Dashboard/AdminPage/AdminUsers/UserAdminPage.tsx b/apps/app/src/components/Dashboard/AdminPage/AdminUsers/UserAdminPage.tsx
index b880f3c94b..ab694e554a 100644
--- a/apps/app/src/components/Dashboard/AdminPage/AdminUsers/UserAdminPage.tsx
+++ b/apps/app/src/components/Dashboard/AdminPage/AdminUsers/UserAdminPage.tsx
@@ -335,7 +335,7 @@ export const UsersAdminPageContent: FC = () => {
         const user = row.original as UserAPI;
         return (
           <SwitchSelector
-            color="text"
+            color="foreground"
             size="sm"
             value={!!user.emailVerified}
             onChange={(checked: boolean) =>
diff --git a/apps/app/src/components/Dashboard/DashboardOverview/DashboardAudience.tsx b/apps/app/src/components/Dashboard/DashboardOverview/DashboardAudience.tsx
index b7bc25adcc..63e8a9b3cb 100644
--- a/apps/app/src/components/Dashboard/DashboardOverview/DashboardAudience.tsx
+++ b/apps/app/src/components/Dashboard/DashboardOverview/DashboardAudience.tsx
@@ -429,7 +429,7 @@ export const DashboardAudience: FC = () => {
             choices={rangeChoices}
             value={range}
             onChange={setRange}
-            color="text"
+            color="foreground"
             size="sm"
             className="w-max"
           />
@@ -513,7 +513,7 @@ export const DashboardAudience: FC = () => {
                 choices={breakdownChoices}
                 value={tab}
                 onChange={setTab}
-                color="text"
+                color="foreground"
                 size="sm"
                 className="w-full"
               />
diff --git a/apps/app/src/components/PricingPage/index.tsx b/apps/app/src/components/PricingPage/index.tsx
index 0b9e7746e4..72810b64fc 100644
--- a/apps/app/src/components/PricingPage/index.tsx
+++ b/apps/app/src/components/PricingPage/index.tsx
@@ -29,7 +29,7 @@ export const PricingPage: FC<PricingPageProps> = ({ pricings }) => {
           { content: periodSwitchLabel.yearly.value, value: Period.Yearly },
           { content: periodSwitchLabel.monthly.value, value: Period.Monthly },
         ]}
-        color="text"
+        color="foreground"
         onChange={setFocusedPeriod}
         value={focusedPeriod}
       />
diff --git a/apps/app/src/components/ReviewerProfilePage/ContactChat.tsx b/apps/app/src/components/ReviewerProfilePage/ContactChat.tsx
index a08d38fb4a..7ad716f015 100644
--- a/apps/app/src/components/ReviewerProfilePage/ContactChat.tsx
+++ b/apps/app/src/components/ReviewerProfilePage/ContactChat.tsx
@@ -69,7 +69,7 @@ export const ContactChat: FC<ContactChatProps> = ({ reviewer }) => {
       transparency="full"
       className="flex flex-1 flex-col overflow-hidden"
     >
-      <div className="border-neutral/20 border-b px-4 py-3">
+      <div className="border-neutral border-neutral/20 border-b px-4 py-3">
         <p className="font-semibold text-sm">
           {content.contact} {reviewer.name ?? 'reviewer'}
         </p>
diff --git a/apps/app/src/components/SwitchThemeSwitcher.tsx b/apps/app/src/components/SwitchThemeSwitcher.tsx
index 290804e508..426d63c000 100644
--- a/apps/app/src/components/SwitchThemeSwitcher.tsx
+++ b/apps/app/src/components/SwitchThemeSwitcher.tsx
@@ -34,7 +34,7 @@ export const SwitchThemeSwitcher: FC = () => {
       choices={themeSwitcher}
       value={resolvedTheme as Modes}
       onChange={setTheme}
-      color="text"
+      color="foreground"
       size="xs"
     />
   );
diff --git a/apps/app/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx b/apps/app/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
index 1350388cda..d030916b70 100644
--- a/apps/app/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
+++ b/apps/app/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
@@ -40,7 +40,7 @@ export const SwitchThemeSwitcher: FC = () => {
       choices={themeSwitcher}
       value={resolvedTheme}
       onChange={setTheme}
-      color="text"
+      color="foreground"
       size="sm"
     />
   );
diff --git a/apps/app/src/components/TranslationStatusAside/TranslationStatusAside.tsx b/apps/app/src/components/TranslationStatusAside/TranslationStatusAside.tsx
index 804a7eb73e..014fa98805 100644
--- a/apps/app/src/components/TranslationStatusAside/TranslationStatusAside.tsx
+++ b/apps/app/src/components/TranslationStatusAside/TranslationStatusAside.tsx
@@ -713,7 +713,7 @@ export const TranslationStatusAside: FC = () => {
                   ]}
                   value={selectSpecific}
                   onChange={setSelectSpecific}
-                  color="text"
+                  color="foreground"
                   size="sm"
                   className="w-full"
                 />
diff --git a/apps/website/src/components/I18nBenchmark/index.tsx b/apps/website/src/components/I18nBenchmark/index.tsx
index ac3df00de4..ae89e91e1f 100644
--- a/apps/website/src/components/I18nBenchmark/index.tsx
+++ b/apps/website/src/components/I18nBenchmark/index.tsx
@@ -388,7 +388,7 @@ export const I18nBenchmark = ({
                       size="sm"
                       value={value}
                       onChange={onChange}
-                      color="text"
+                      color="foreground"
                     />
                   </div>
                 ))}
diff --git a/apps/website/src/components/LandingPage/AuditSection/index.tsx b/apps/website/src/components/LandingPage/AuditSection/index.tsx
index 2edd6bbaf3..5d7bff63c3 100644
--- a/apps/website/src/components/LandingPage/AuditSection/index.tsx
+++ b/apps/website/src/components/LandingPage/AuditSection/index.tsx
@@ -18,7 +18,7 @@ export const AuditSection: FC = () => {
   };
 
   return (
-    <section className="flex w-full flex-col gap-16 overflow-hidden border-b px-20 py-20">
+    <section className="flex w-full flex-col gap-16 overflow-hidden border-neutral border-b px-20 py-20">
       <h2 className="mx-auto max-w-3xl text-center font-bold text-3xl text-foreground leading-tight sm:text-5xl md:text-5xl lg:text-5xl">
         {title}
       </h2>
diff --git a/apps/website/src/components/LandingPage/AvailableTechnoSection/index.tsx b/apps/website/src/components/LandingPage/AvailableTechnoSection/index.tsx
index c72a69a7ad..4ad2d21b98 100644
--- a/apps/website/src/components/LandingPage/AvailableTechnoSection/index.tsx
+++ b/apps/website/src/components/LandingPage/AvailableTechnoSection/index.tsx
@@ -234,7 +234,7 @@ export const AvailableTechnoSection: FC = () => {
   return (
     <section
       ref={containerRef}
-      className="z-10 flex w-full flex-col items-center justify-center overflow-hidden border-b p-16"
+      className="z-10 flex w-full flex-col items-center justify-center overflow-hidden border-neutral border-b p-16"
     >
       <h2 className="mb-3 text-3xl">{availableOn}</h2>
       <div className="my-10 flex flex-col items-center gap-6">
diff --git a/apps/website/src/components/LandingPage/DemoSection/index.tsx b/apps/website/src/components/LandingPage/DemoSection/index.tsx
index 56caf45f63..d1db2c00e8 100644
--- a/apps/website/src/components/LandingPage/DemoSection/index.tsx
+++ b/apps/website/src/components/LandingPage/DemoSection/index.tsx
@@ -42,7 +42,7 @@ export const DemoSection: FC = () => {
   ] as SwitchSelectorChoices<DemoType>;
 
   return (
-    <section className="z-10 flex w-full flex-col items-center justify-center border-b p-16">
+    <section className="z-10 flex w-full flex-col items-center justify-center border-neutral border-b p-16">
       <div className="my-6 flex w-full max-w-250 flex-col items-center gap-5 px-10 md:px-20">
         <div className="flex w-full items-center justify-between gap-4">
           <h2 className="text-3xl">{title}</h2>
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/index.tsx b/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
index f63f2e88de..9741f3b048 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/index.tsx
@@ -218,7 +218,7 @@ export const FeaturesCarousel: FC<FeaturesCarouselProps> = ({
 
   return (
     <section
-      className="relative z-0 border-b"
+      className="relative z-0 border-neutral border-b"
       style={{
         // Make the entire container as tall as the number of sections * 150vh
         height: `${nbSections * 125}vh`,
diff --git a/apps/website/src/components/LandingPage/HeroSection/hero-section.content.ts b/apps/website/src/components/LandingPage/HeroSection/hero-section.content.ts
index 35e425962d..c3c0dbf3cd 100644
--- a/apps/website/src/components/LandingPage/HeroSection/hero-section.content.ts
+++ b/apps/website/src/components/LandingPage/HeroSection/hero-section.content.ts
@@ -3,26 +3,6 @@ import { type Dictionary, t } from 'intlayer';
 const heroSectionContent = {
   key: 'hero-section',
   content: {
-    whatsNew: t({
-      ar: 'ما الجديد',
-      de: 'Was gibt es Neues',
-      en: "What's new",
-      'en-GB': "What's new",
-      es: 'Novedades',
-      fr: 'Actualités ',
-      hi: 'नया क्या है',
-      it: 'Novità',
-      ja: '新着情報',
-      ko: '새로운 소식',
-      pt: 'Novidades',
-      ru: 'Что нового',
-      tr: 'Neler Yeni',
-      zh: '最新消息',
-      pl: 'Co nowego',
-      id: 'Apa yang baru',
-      vi: 'Có gì mới',
-      uk: 'Що нового',
-    }),
     whatsNewLabel: t({
       ar: 'اذهب إلى صفحة التحديثات',
       de: 'Zur Seite der Updates gehen',
diff --git a/apps/website/src/components/LandingPage/HeroSection/index.tsx b/apps/website/src/components/LandingPage/HeroSection/index.tsx
index 14899b5313..deedc2c18a 100644
--- a/apps/website/src/components/LandingPage/HeroSection/index.tsx
+++ b/apps/website/src/components/LandingPage/HeroSection/index.tsx
@@ -1,22 +1,14 @@
 import { Button } from '@intlayer/design-system/button';
+import { Container } from '@intlayer/design-system/container';
 import { useCopyToClipboard } from '@intlayer/design-system/copy-to-clipboard';
 import { CodeBlock } from '@intlayer/design-system/ide';
 import {
   External_Github,
-  Website_Doc_Environment_ViteAndReact_Path,
   Website_Doc_Path,
   Website_ReleasesV9_Path,
 } from '@intlayer/design-system/routes';
 import { Tag } from '@intlayer/design-system/tag';
-import { motion } from 'framer-motion';
-import {
-  ArrowRight,
-  Check,
-  ChevronRight,
-  Copy,
-  ExternalLink,
-  Megaphone,
-} from 'lucide-react';
+import { ArrowRight, Check, ChevronRight, Copy, Megaphone } from 'lucide-react';
 import type { FC } from 'react';
 import { useIntlayer } from 'react-intlayer';
 import { BackgroundLayout } from '~/components/BackgroundLayout';
@@ -28,7 +20,6 @@ const SHOW_WHATS_NEW = true;
 
 export const HeroSection: FC = () => {
   const {
-    //    whatsNew,
     whatsNewLabel,
     version,
     title,
@@ -44,16 +35,11 @@ export const HeroSection: FC = () => {
 
   return (
     <section className="relative flex min-h-[calc(100dvh-60px)] flex-col">
-      <section className="relative flex w-full flex-1 flex-col border-b px-4 sm:px-6 md:px-8 lg:px-12">
+      <section className="relative flex w-full flex-1 flex-col border-neutral border-b px-4 sm:px-6 md:px-8 lg:px-12">
         <BackgroundLayout />
         <div className="flex flex-1 flex-col items-center justify-center py-10 sm:py-16">
           {SHOW_WHATS_NEW && (
-            <motion.div
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6 }}
-              className="mb-6 flex items-center justify-center gap-2 sm:mb-8"
-            >
+            <div className="hero-enter mb-6 flex items-center justify-center gap-2 sm:mb-8">
               <Link to={Website_ReleasesV9_Path} label={whatsNewLabel.value}>
                 <Tag
                   size="md"
@@ -67,7 +53,7 @@ export const HeroSection: FC = () => {
                   </span>
                 </Tag>
               </Link>
-            </motion.div>
+            </div>
           )}
 
           {/* Title */}
@@ -75,27 +61,24 @@ export const HeroSection: FC = () => {
             {title}
           </h1>
           {/* Subtitle */}
-          <motion.h2
-            initial={{ filter: 'blur(10px)', opacity: 0, y: 30 }}
-            animate={{ filter: 'blur(0px)', opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.5 }}
-            className="mb-6 px-2 text-center font-semibold text-lg leading-snug sm:text-2xl md:text-3xl lg:mb-8 lg:text-4xl"
+          <h2
+            className="hero-enter-sharpen mb-6 px-2 text-center font-semibold text-lg leading-snug sm:text-2xl md:text-3xl lg:mb-8 lg:text-4xl"
+            style={{ animationDelay: '0.5s' }}
           >
             {subheading}
-          </motion.h2>
+          </h2>
           {/* Description */}
 
           {/* Copyable code block */}
-          <motion.div
-            initial={{ opacity: 0, y: 0 }}
-            animate={{ opacity: 1, y: -30 }}
-            transition={{ delay: 0.7, duration: 0.6 }}
+          <Container
             onClick={copy}
-            className="mt-8 flex w-full max-w-xl cursor-pointer flex-row items-center justify-between gap-1 overflow-hidden rounded-lg border bg-card p-1 py-2 pr-2 pl-3 sm:pl-4"
+            roundedSize="xl"
+            className="hero-enter-lift mt-8 flex w-full max-w-xl cursor-pointer flex-row items-center justify-between gap-1 overflow-hidden border bg-card p-1 py-2 pr-2 pl-3 sm:pl-4"
+            style={{ animationDelay: '0.7s' }}
           >
-            <ChevronRight className="size-6 shrink-0 text-muted-foreground sm:size-8" />
+            <ChevronRight className="size-6 shrink-0 text-neutral" />
             <CodeBlock
-              className="min-w-0 flex-1 justify-center overflow-x-auto whitespace-nowrap text-sm sm:text-base"
+              className="justify-left min-w-0 flex-1 overflow-x-auto whitespace-nowrap pl-6 text-sm sm:text-base"
               lang="bash"
             >
               npx intlayer init
@@ -110,22 +93,18 @@ export const HeroSection: FC = () => {
               label={copyButton.value}
               className="shrink-0"
             />
-          </motion.div>
-          <motion.p
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.6, duration: 0.6 }}
-            className="mx-auto mt-4 mb-8 max-w-xl px-2 text-center text-muted-foreground text-sm leading-relaxed sm:text-lg lg:mb-12"
+          </Container>
+          <p
+            className="hero-enter mx-auto mt-4 mb-8 max-w-xl px-2 text-center text-muted-foreground text-sm leading-relaxed sm:text-lg lg:mb-12"
+            style={{ animationDelay: '0.6s' }}
           >
             {description}
-          </motion.p>
+          </p>
 
           {/* Action Buttons */}
-          <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: 0.8, duration: 0.6 }}
-            className="flex w-full max-w-xs flex-col justify-center gap-3 sm:max-w-none sm:flex-row sm:gap-4"
+          <div
+            className="hero-enter flex w-full max-w-xs flex-col justify-center gap-3 sm:max-w-none sm:flex-row sm:gap-4"
+            style={{ animationDelay: '0.8s' }}
           >
             <Link
               to={External_Github}
@@ -155,23 +134,21 @@ export const HeroSection: FC = () => {
 
               <ArrowRight width={20} height={20} />
             </Link>
-          </motion.div>
+          </div>
         </div>
       </section>
-      <div className="flex items-center justify-between gap-4 border-b px-4 py-3">
+      <div className="flex items-center justify-between gap-4 border-neutral border-y px-4 py-3">
         <p className="truncate font-mono text-foreground text-xs uppercase tracking-wider sm:text-sm md:text-base">
           {availableFor}
         </p>
       </div>
 
-      <motion.section
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 1.0, duration: 0.6 }}
-        className="relative w-full overflow-x-auto border-b"
+      <section
+        className="hero-enter relative w-full overflow-x-auto border-neutral border-b"
+        style={{ animationDelay: '1s' }}
       >
         <TechLogos />
-      </motion.section>
+      </section>
     </section>
   );
 };
diff --git a/apps/website/src/components/LandingPage/ProductsSection/index.tsx b/apps/website/src/components/LandingPage/ProductsSection/index.tsx
index 78618ef75d..f8ef57e9b3 100644
--- a/apps/website/src/components/LandingPage/ProductsSection/index.tsx
+++ b/apps/website/src/components/LandingPage/ProductsSection/index.tsx
@@ -46,7 +46,7 @@ export const ProductsSection: FC = () => {
   return (
     <div
       ref={sectionRef}
-      className="flex min-h-[75vh] w-full items-center justify-center overflow-hidden border-b"
+      className="flex min-h-[75vh] w-full items-center justify-center overflow-hidden border-neutral border-b"
     >
       <Carousel initialIndex={1} className="space-y-10 overflow-visible">
         {PRODUCTS.map(({ Component, key }) => (
diff --git a/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx b/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
index 56dfcc7bba..6af72bb441 100644
--- a/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
+++ b/apps/website/src/components/LandingPage/WhyToChoseIntlayerSection/index.tsx
@@ -16,7 +16,7 @@ export const WhyToChoseIntlayerSection: FC = () => {
   const { title, content } = useIntlayer('why-to-chose-intlayer-section');
 
   return (
-    <section className="flex w-full flex-col items-center justify-center gap-10 border-b py-10">
+    <section className="flex w-full flex-col items-center justify-center gap-10 border-neutral border-b py-10">
       <h2 className="text-4xl">{title}</h2>
 
       <div className="m-auto mt-3 grid w-full grid-cols-[auto_auto] place-items-center justify-evenly gap-x-2 gap-y-10 px-3 py-2 md:grid-cols-[1fr_1fr_1fr]">
diff --git a/apps/website/src/components/LandingPage/index.tsx b/apps/website/src/components/LandingPage/index.tsx
index b9332251d7..2b1676da07 100644
--- a/apps/website/src/components/LandingPage/index.tsx
+++ b/apps/website/src/components/LandingPage/index.tsx
@@ -87,7 +87,7 @@ export const LandingPage: FC = () => {
 
         <section aria-label={content.supportedLanguagesSection.value}>
           <Suspense fallback={<Loader />}>
-            <LanguageSection className="border-b" />
+            <LanguageSection className="border-neutral border-b" />
           </Suspense>
         </section>
 
diff --git a/apps/website/src/components/LandingSwitcher.tsx b/apps/website/src/components/LandingSwitcher.tsx
deleted file mode 100644
index 9e8b4c93e4..0000000000
--- a/apps/website/src/components/LandingSwitcher.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Button } from '@intlayer/design-system/button';
-import { Container } from '@intlayer/design-system/container';
-import { DropDown } from '@intlayer/design-system/drop-down';
-import { MoveVertical } from 'lucide-react';
-import { type FC, lazy, Suspense, useState } from 'react';
-import { LandingPage } from './LandingPage';
-
-const DROPDOWN_IDENTIFIER = 'landing-switcher';
-
-const CMSLandingPage = lazy(() =>
-  import('./CMSLandingPage').then((module) => ({
-    default: module.CMSLandingPage,
-  }))
-);
-const TMSLandingPage = lazy(() =>
-  import('./TMSLandingPage').then((module) => ({
-    default: module.TMSLandingPage,
-  }))
-);
-
-export const LandingPageWithSwitcher: FC = () => {
-  const Landings = {
-    int: { Component: LandingPage, content: 'Internationalization Packages' },
-    cms: { Component: CMSLandingPage, content: 'Content Management System' },
-    tms: {
-      Component: TMSLandingPage,
-      content: 'Translations Management System',
-    },
-  } as const;
-
-  const [landing, set_landing] = useState<keyof typeof Landings>('int');
-  const Landing = Landings[landing];
-
-  return (
-    <>
-      <div className="absolute right-0 p-4">
-        <DropDown identifier={DROPDOWN_IDENTIFIER}>
-          <DropDown.Trigger
-            identifier={DROPDOWN_IDENTIFIER}
-            aria-label="Select landing page"
-            size="lg"
-            className="z-50 p-0!"
-            variant="outline"
-            color="foreground"
-            roundedSize="sm"
-          >
-            <div className="flex w-full items-center justify-between">
-              <div className="text-nowrap px-2 text-sm">{Landing.content}</div>
-              <MoveVertical className="w-5 self-center" />
-            </div>
-          </DropDown.Trigger>
-
-          <DropDown.Panel
-            identifier={DROPDOWN_IDENTIFIER}
-            isOverable
-            isFocusable
-            align="end"
-          >
-            <Container
-              className="max-h-[80vh] min-w-28 border border-text/5"
-              separator="y"
-              roundedSize="xl"
-              transparency="xs"
-            >
-              <ul
-                className="divide-y divide-dashed divide-text/20 overflow-y-auto p-1"
-                aria-label="Landing pages"
-              >
-                {Object.entries(Landings)
-                  .filter((x) => landing !== x[0])
-                  .map(([key, Landing]) => (
-                    <li className="py-1 pr-3" key={key}>
-                      <Button
-                        variant="invisible-link"
-                        className="w-full"
-                        label={Landing.content}
-                        onClick={() =>
-                          set_landing(key as keyof typeof Landings)
-                        }
-                      >
-                        <div className="flex flex-row items-center justify-between gap-3 px-2 py-1">
-                          <span>{Landing.content}</span>
-                        </div>
-                      </Button>
-                    </li>
-                  ))}
-              </ul>
-            </Container>
-          </DropDown.Panel>
-        </DropDown>
-      </div>
-
-      <Suspense fallback="Loading">
-        <Landing.Component />
-      </Suspense>
-    </>
-  );
-};
diff --git a/apps/website/src/routes/{-$locale}/index.tsx b/apps/website/src/routes/{-$locale}/index.tsx
index fe177f8c9b..1abde6227b 100644
--- a/apps/website/src/routes/{-$locale}/index.tsx
+++ b/apps/website/src/routes/{-$locale}/index.tsx
@@ -2,7 +2,7 @@ import { Website_Home } from '@intlayer/design-system/routes';
 import { buildProductJsonLd } from '@intlayer/design-system/structured-data';
 import { createFileRoute } from '@tanstack/react-router';
 import { defaultLocale, getIntlayerAsync } from 'intlayer';
-import { LandingPageWithSwitcher } from '~/components/LandingSwitcher';
+import { LandingPage as LandingPageContent } from '~/components/LandingPage';
 import { PageLayout } from '~/layouts/PageLayout';
 import { getAbsoluteUrl, getHreflangLinks } from '~/utils/seo';
 import { formatStructuredDataOffers, getPricing } from '~/utils/stripe';
@@ -100,8 +100,8 @@ export const Route = createFileRoute('/{-$locale}/')({
 
 function LandingPage() {
   return (
-    <PageLayout mainClassName="max-w-[1300px] mx-auto border-x relative">
-      <LandingPageWithSwitcher />
+    <PageLayout mainClassName="max-w-[1300px] mx-auto border-neutral xl:border-x relative">
+      <LandingPageContent />
     </PageLayout>
   );
 }
diff --git a/packages/@intlayer/design-system/src/components/Button/Button.tsx b/packages/@intlayer/design-system/src/components/Button/Button.tsx
index 6cd7f48501..e182925d65 100644
--- a/packages/@intlayer/design-system/src/components/Button/Button.tsx
+++ b/packages/@intlayer/design-system/src/components/Button/Button.tsx
@@ -59,10 +59,12 @@ export type ButtonColor =
   | 'primary'
   | 'secondary'
   | 'neutral'
-  | 'white'
-  | 'black'
+  | 'light'
+  | 'dark'
+  | 'text'
   | 'foreground'
-  | 'background'
+  | 'card'
+  | 'text-inverse'
   | 'current'
   | 'error'
   | 'success'
@@ -76,7 +78,6 @@ export type ButtonTextAlign = 'left' | 'center' | 'right';
 /**
  * Enhanced button variants with improved accessibility and focus states
  */
-
 export const buttonVariants = cva(
   'relative inline-flex cursor-pointer items-center justify-center font-medium ring-0 transition-all duration-300 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50',
   {
@@ -93,20 +94,24 @@ export const buttonVariants = cva(
         'icon-xl': 'p-3',
         custom: '',
       },
-      // color fixe la "currentColor" (reprise par bg-current dans variant.default)
-      // + la couleur de contraste des enfants (icônes, texte, loader)
       color: {
-        primary: 'text-primary ring-primary/20 *:text-primary-foreground',
+        primary:
+          'hover-primary-500/20 text-primary ring-primary-500/20 *:text-text-light',
         secondary:
-          'text-secondary ring-secondary/20 *:text-secondary-foreground',
-        neutral: 'text-neutral ring-neutral/20 *:text-white',
-        white: 'text-white ring-white/20 *:text-black',
-        black: 'text-black ring-black/20 *:text-white',
-        foreground: 'text-foreground ring-foreground/20 *:text-background',
-        background: 'text-background ring-background/20 *:text-foreground',
-        current: 'text-current ring-current/10 *:text-current',
-        error: 'text-error ring-error/20 *:text-white',
-        success: 'text-success ring-success/20 *:text-white',
+          'hover-secondary-500/20 text-secondary ring-secondary-500/20 *:text-text-light',
+        neutral: 'text-neutral ring-neutral-500/5 *:text-text-light',
+        card: 'hover-card-500/20 text-card ring-card-500/20 *:text-text-light',
+        light: 'hover-white-500/20 text-white ring-white/20 *:text-text-light',
+        dark: 'text-neutral-800 ring-text-light/50 *:text-text-light',
+        text: 'text-text ring-text/20 *:text-text-opposite',
+        foreground:
+          'text-foreground ring-foreground/20 *:text-foreground-opposite',
+        current:
+          'hover-current-500/10 text-current ring-current/10 *:text-text-light',
+        'text-inverse': 'text-text-opposite ring-text-opposite/20 *:text-text',
+        error: 'hover-error-500/20 text-error ring-error/20 *:text-text-light',
+        success:
+          'hover-success-500/20 text-success ring-success/20 *:text-text-light',
         custom: '',
       },
       roundedSize: {
@@ -155,25 +160,31 @@ export const buttonVariants = cva(
           'hover:ring-5 focus-visible:ring-5',
           'aria-selected:ring-5',
         ],
-
         input: [
-          'text-foreground',
+          // base styles
+          'text-text',
           'w-full select-text resize-none rounded-2xl text-base shadow-none outline-none supports-[corner-shape:squircle]:rounded-4xl',
           'transition-shadow duration-100 md:text-sm',
-          'ring-0',
+          'ring-0', // base ring
           'disabled:opacity-50',
 
-          'bg-muted',
-          'ring-border',
+          'text-text',
+          'bg-neutral-50 dark:bg-neutral-950',
+          'ring-neutral-100 dark:ring-neutral-700',
 
-          'hover:ring-3',
+          // Hover ring (similar spirit to your input)
+          'hover:ring-3', // width
           'aria-selected:ring-4',
-          'focus-visible:ring-3 focus-visible:ring-ring',
+          'focus-visible:ring-3',
           'disabled:ring-0',
 
+          // Focus ring + animation
           'focus-visible:outline-none',
+
+          // Remove any weird box-shadow
           '[box-shadow:none] focus:[box-shadow:none]',
 
+          // aria-invalid border color
           'aria-invalid:border-error',
         ],
       },
@@ -192,7 +203,7 @@ export const buttonVariants = cva(
     defaultVariants: {
       variant: 'default',
       size: 'md',
-      color: 'foreground',
+      color: 'text',
       roundedSize: 'md',
       textAlign: 'center',
       isFullWidth: false,
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
index 9eaba268c3..c60803bafc 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
@@ -223,7 +223,7 @@ const ContentEditorToggle: FC<ContentEditorToggleProps> = ({
       onChange={(value) =>
         addEditedContent(dictionary.localId!, value, keyPath)
       }
-      color="text"
+      color="foreground"
       size="sm"
       {...props}
     />
@@ -883,7 +883,7 @@ const HtmlTextEditor: FC<TextEditorProps> = ({
         choices={toggleContent}
         value={mode}
         onChange={setMode}
-        color="text"
+        color="foreground"
         size="sm"
         className="ml-auto"
       />
@@ -970,7 +970,7 @@ const MarkdownTextEditor: FC<TextEditorProps> = ({
         choices={toggleContent}
         value={mode}
         onChange={setMode}
-        color="text"
+        color="foreground"
         size="sm"
         className="ml-auto"
       />
diff --git a/packages/@intlayer/design-system/src/components/Footer/index.tsx b/packages/@intlayer/design-system/src/components/Footer/index.tsx
index 4ae8fb68c4..99c188a033 100644
--- a/packages/@intlayer/design-system/src/components/Footer/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Footer/index.tsx
@@ -123,7 +123,7 @@ type FooterProps = {
  * @returns A rendered footer with branding, social links, and optional navigation links
  */
 export const Footer: FC<FooterProps> = ({ links, footerText }) => (
-  <footer className="flex flex-auto flex-row flex-wrap items-center justify-around gap-10 border-t p-6">
+  <footer className="flex flex-auto flex-row flex-wrap items-center justify-around gap-10 border-neutral border-t p-6">
     <aside className="flex flex-col items-center justify-between gap-3 md:w-1/4">
       <LogoWithTextBelow className="size-full max-w-30" />
       <span className="text-center text-muted-foreground text-xs">
diff --git a/packages/@intlayer/design-system/src/components/IDE/Code.tsx b/packages/@intlayer/design-system/src/components/IDE/Code.tsx
index 0e29aa877f..3cead50d19 100644
--- a/packages/@intlayer/design-system/src/components/IDE/Code.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/Code.tsx
@@ -258,9 +258,7 @@ export const Code: FC<CodeCompProps> = ({
              * supplied, otherwise fall back to the Suspense-based async Shiki
              * renderer.
              */
-
             <CodeBlock lang={language} highlightedHtml={highlightedHtml}>
-              HERE
               {rawCode}
             </CodeBlock>
           )}
diff --git a/packages/@intlayer/design-system/src/components/IDE/IDE.tsx b/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
index 18598c62d4..4da0eb5b92 100644
--- a/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
+++ b/packages/@intlayer/design-system/src/components/IDE/IDE.tsx
@@ -107,7 +107,7 @@ export const IDE: FC<IDEProps> = ({
               </div>
             </WithResizer>
 
-            <div className="size-full flex-1 overflow-auto bg-background text-xs [&>pre]:bg-red-400!">
+            <div className="size-full flex-1 overflow-auto bg-background text-xs">
               {content && (
                 <MarkdownRenderer codeClassName="bg-background rounded-none">
                   {content}
diff --git a/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx b/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
index e680d9998b..b6c3424fff 100644
--- a/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
+++ b/packages/@intlayer/design-system/src/components/LanguageBackground/LanguageSection.tsx
@@ -14,7 +14,6 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { Container } from '../Container';
 import { Flag } from '../Flags';
 
 const shuffleArray = (array: string[], limit?: number) => {
diff --git a/packages/@intlayer/design-system/src/components/Link/Link.tsx b/packages/@intlayer/design-system/src/components/Link/Link.tsx
index 5f4f74674b..486a6e92e0 100644
--- a/packages/@intlayer/design-system/src/components/Link/Link.tsx
+++ b/packages/@intlayer/design-system/src/components/Link/Link.tsx
@@ -53,18 +53,18 @@ export const linkVariants = cva(
     variants: {
       variant: {
         default:
-          'h-auto justify-start border-inherit bg-transparent px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-transparent hover:text-current/80 hover:underline hover:underline-offset-6',
+          'h-auto justify-start border-inherit bg-current/0 px-1 font-medium decoration-[1.5] underline-offset-5 hover:bg-current/0 hover:text-current/80 hover:underline hover:underline-offset-6',
         'invisible-link':
-          'h-auto justify-start border-inherit bg-transparent px-1',
+          'h-auto justify-start border-inherit bg-current/0 px-1',
 
         button:
-          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full px-6 text-center font-medium text-sm ring-0 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
+          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full bg-current px-6 text-center font-medium text-sm text-text ring-0 *:text-text-opposite hover:bg-current/90 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
 
         'button-outlined':
-          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] px-6 text-center font-medium text-sm ring-0 hover:bg-current/10 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
+          'relative inline-flex min-h-8 cursor-pointer flex-row items-center justify-center gap-2 rounded-full border-[1.3px] border-current px-6 text-center font-medium text-sm text-text ring-0 *:text-text hover:bg-current/20 hover:ring-5 aria-selected:ring-5 aria-[current]:ring-5 max-md:py-2',
 
         hoverable:
-          'rounded-lg border-none bg-transparent transition hover:bg-current/10 aria-[current]:bg-current/5',
+          'rounded-lg border-none bg-current/0 transition *:text-current! hover:bg-current/10 aria-[current]:bg-current/5',
       },
       roundedSize: {
         none: 'rounded-none',
@@ -78,15 +78,14 @@ export const linkVariants = cva(
           'rounded-[2.5rem] [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-[3rem]',
         full: 'rounded-full',
       },
-      // Pour "default" / "invisible-link" / "hoverable" : juste la couleur du texte
       color: {
         primary: 'text-primary',
         secondary: 'text-secondary',
         neutral: 'text-neutral',
         light: 'text-white',
         dark: 'text-neutral-800',
-        text: 'text-foreground',
-        'text-inverse': 'text-foreground-opposite',
+        text: 'text-text',
+        'text-inverse': 'text-text-opposite',
         error: 'text-error',
         success: 'text-success',
         custom: '',
@@ -104,118 +103,94 @@ export const linkVariants = cva(
         false: 'no-underline',
       },
     },
+    // Compound variants handle height and padding
     compoundVariants: [
+      // ---------------------------------------------------------
+      // FIX START: Correctly Handle Contrast for TEXT_INVERSE
+      // ---------------------------------------------------------
       {
+        // Filled Button + Inverse Color (e.g., White Button):
+        // We DO NOT override parent text color (it must remain 'text-opposite' so bg-current is white).
+        // We ONLY override children to be 'text-text' (Dark) so they show up on white.
         variant: 'button',
-        color: 'primary',
-        class: 'bg-primary text-primary-foreground ring-primary/20',
-      },
-      {
-        variant: 'button',
-        color: 'secondary',
-        class: 'bg-secondary text-secondary-foreground ring-secondary/20',
-      },
-      {
-        variant: 'button',
-        color: 'neutral',
-        class: 'bg-neutral text-white ring-neutral/20',
-      },
-      {
-        variant: 'button',
-        color: 'light',
-        class: 'bg-white text-black ring-white/20',
+        color: 'text-inverse',
+        class: '*:text-text',
       },
       {
-        variant: 'button',
-        color: 'dark',
-        class: 'bg-neutral-800 text-white ring-neutral-800/20',
+        // Outlined Button + Inverse Color (e.g., White Border):
+        // Parent is 'text-opposite' (Border is white).
+        // Children must also be 'text-opposite' (White text) to show on dark background.
+        variant: 'button-outlined',
+        color: 'text-inverse',
+        class: 'text-text-opposite *:text-text-opposite',
       },
+
+      // Min height and padding for button variants
       {
-        variant: 'button',
-        color: 'text',
-        class: 'bg-foreground text-background ring-foreground/20',
+        variant: ['button', 'button-outlined'],
+        size: 'sm',
+        class: 'min-h-7 px-3 text-xs max-md:py-1',
       },
       {
-        variant: 'button',
-        color: 'text-inverse',
-        class: 'bg-background text-foreground ring-foreground/20',
+        variant: ['button', 'button-outlined'],
+        size: 'md',
+        class: 'min-h-8 px-6 text-sm max-md:py-2',
       },
       {
-        variant: 'button',
-        color: 'error',
-        class: 'bg-error text-white ring-error/20',
+        variant: ['button', 'button-outlined'],
+        size: 'lg',
+        class: 'min-h-10 px-8 text-lg max-md:py-3',
       },
       {
-        variant: 'button',
-        color: 'success',
-        class: 'bg-success text-white ring-success/20',
+        variant: ['button', 'button-outlined'],
+        size: 'xl',
+        class: 'min-h-11 px-10 text-xl max-md:py-4',
       },
-
+      // Ring color variants
       {
-        variant: 'button-outlined',
+        variant: ['button', 'button-outlined'],
         color: 'primary',
-        class: 'border-primary text-primary hover:bg-primary/10',
+        class: 'ring-primary/20',
       },
       {
-        variant: 'button-outlined',
+        variant: ['button', 'button-outlined'],
         color: 'secondary',
-        class: 'border-secondary text-secondary hover:bg-secondary/10',
+        class: 'ring-secondary/20',
       },
       {
-        variant: 'button-outlined',
+        variant: ['button', 'button-outlined'],
         color: 'neutral',
-        class: 'border-neutral text-muted-foreground hover:bg-neutral/10',
+        class: 'ring-neutral/20',
       },
       {
-        variant: 'button-outlined',
+        variant: ['button', 'button-outlined'],
         color: 'light',
-        class: 'border-white text-white hover:bg-white/10',
+        class: 'ring-white/20',
       },
       {
-        variant: 'button-outlined',
+        variant: ['button', 'button-outlined'],
         color: 'dark',
-        class: 'border-neutral-800 text-neutral-800 hover:bg-neutral-800/10',
+        class: 'ring-neutral-800/20',
       },
-      {
-        variant: 'button-outlined',
-        color: 'text',
-        class: 'border-foreground text-foreground hover:bg-foreground/10',
-      },
-      {
-        variant: 'button-outlined',
-        color: 'text-inverse',
-        class: 'border-background text-background hover:bg-background/10',
-      },
-      {
-        variant: 'button-outlined',
-        color: 'error',
-        class: 'border-error text-error hover:bg-error/10',
-      },
-      {
-        variant: 'button-outlined',
-        color: 'success',
-        class: 'border-success text-success hover:bg-success/10',
-      },
-
       {
         variant: ['button', 'button-outlined'],
-        size: 'sm',
-        class: 'min-h-7 px-3 text-xs max-md:py-1',
+        color: 'text',
+        class: 'ring-text/20',
       },
       {
         variant: ['button', 'button-outlined'],
-        size: 'md',
-        class: 'min-h-8 px-6 text-sm max-md:py-2',
+        color: 'text-inverse',
+        class: 'ring-text-opposite/20',
       },
       {
         variant: ['button', 'button-outlined'],
-        size: 'lg',
-        class: 'min-h-10 px-8 text-lg max-md:py-3',
+        color: 'error',
+        class: 'ring-error/20',
       },
       {
         variant: ['button', 'button-outlined'],
-        size: 'xl',
-        class: 'min-h-11 px-10 text-xl max-md:py-4',
+        color: 'success',
+        class: 'ring-success/20',
       },
     ],
 
diff --git a/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx b/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
index 5522d3f558..887a9163ff 100644
--- a/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
+++ b/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
@@ -157,7 +157,7 @@ export const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({
                 <SwitchSelector
                   defaultValue={seeAllLocales} // Ensure this uses the persisted state
                   onChange={handleSeeAllLocales}
-                  color="text"
+                  color="foreground"
                   size="sm"
                   className="!w-60"
                   choices={[
diff --git a/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx b/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
index c88aed37c1..7ce87affd3 100644
--- a/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
+++ b/packages/@intlayer/design-system/src/components/Navbar/DesktopNavbar.tsx
@@ -94,7 +94,7 @@ export const DesktopNavbar = <T extends TabSelectorItemProps>({
   rightItems,
   selectedChoice,
 }: DesktopNavbarProps<T>) => (
-  <nav className="sticky top-0 z-50 flex w-full items-center border-b px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur-2xl">
+  <nav className="sticky top-0 z-50 flex w-full items-center border-neutral border-b px-4 py-3 shadow-[0_0_10px_-15px_rgba(0,0,0,0.3)] backdrop-blur-2xl">
     {logo}
 
     <TabSelector
diff --git a/packages/@intlayer/design-system/styles/fonts.css b/packages/@intlayer/design-system/styles/fonts.css
deleted file mode 100644
index 50f51af7de..0000000000
--- a/packages/@intlayer/design-system/styles/fonts.css
+++ /dev/null
@@ -1,7 +0,0 @@
-@font-face {
-  font-family: 'Geist';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url('/Geist-VariableFont_wght.ttf') format('truetype');
-}
diff --git a/packages/@intlayer/design-system/styles/globals.css b/packages/@intlayer/design-system/styles/globals.css
index 5d44f00f0d..f981953482 100644
--- a/packages/@intlayer/design-system/styles/globals.css
+++ b/packages/@intlayer/design-system/styles/globals.css
@@ -1,64 +1,312 @@
-@import 'tailwindcss';
-@plugin "@tailwindcss/aspect-ratio";
-@source "../src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
-
-@import 'fonts.css';
-@import 'themes.css';
+@font-face {
+  font-family: "Geist";
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src:
+    url("/Geist-VariableFont_wght.woff2") format("woff2"),
+    url("/Geist-VariableFont_wght.ttf") format("truetype");
+}
 
 @theme {
-  --font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Geist", "Inter", sans-serif;
 
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+  --color-background: rgba(255, 255, 255);
+  --color-background-opposite: rgba(18, 18, 18);
 
-  --color-card: var(--card);
-  --color-card-hover: var(--card-hover);
+  --color-text: rgba(18, 18, 18);
+  --color-text-opposite: rgba(255, 255, 255);
+  --color-text-dark: rgba(255, 255, 255);
+  --color-text-light: rgba(18, 18, 18);
 
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
+  --color-card: rgba(29, 29, 29);
+  --color-card-hover: rgba(29, 29, 29);
 
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
+  --color-hypertext: var(--color-text);
+  --color-hypertext-hover: rgba(197, 101, 212);
+  --color-hypertext-active: var(--color-text);
 
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
+  --color-shadow: rgba(18, 18, 18);
 
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
+  --color-primary: var(--color-text);
+  --color-primary-50: rgba(249, 253, 230);
+  --color-primary-100: rgba(238, 248, 186);
+  --color-primary-200: rgba(226, 243, 143);
+  --color-primary-300: rgba(215, 239, 105);
+  --color-primary-400: var(--color-text);
+  --color-primary-500: rgba(182, 211, 57);
+  --color-primary-600: rgba(153, 177, 48);
+  --color-primary-700: rgba(116, 134, 37);
+  --color-primary-800: rgba(92, 106, 29);
+  --color-primary-900: rgba(67, 77, 21);
+  --color-primary-950: rgba(40, 46, 12);
 
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
+  --color-secondary: rgba(255, 230, 109);
+  --color-secondary-50: rgba(254, 251, 232);
+  --color-secondary-100: rgba(255, 246, 194);
+  --color-secondary-200: rgba(255, 230, 109);
+  --color-secondary-300: rgba(255, 216, 69);
+  --color-secondary-400: rgba(252, 193, 19);
+  --color-secondary-500: rgba(236, 168, 6);
+  --color-secondary-600: rgba(204, 129, 2);
+  --color-secondary-700: rgba(162, 90, 6);
+  --color-secondary-800: rgba(134, 71, 13);
+  --color-secondary-900: rgba(114, 58, 17);
+  --color-secondary-950: rgba(67, 29, 5);
 
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
+  --color-neutral: rgba(93, 93, 93);
+  --color-neutral-50: rgba(249, 249, 249);
+  --color-neutral-100: rgba(231, 231, 231);
+  --color-neutral-200: rgba(209, 209, 209);
+  --color-neutral-300: rgba(176, 176, 176);
+  --color-neutral-400: rgba(136, 136, 136);
+  --color-neutral-500: rgba(109, 109, 109);
+  --color-neutral-600: rgba(93, 93, 93);
+  --color-neutral-700: rgba(79, 79, 79);
+  --color-neutral-800: rgba(69, 69, 69);
+  --color-neutral-900: rgba(61, 61, 61);
+  --color-neutral-950: rgba(48, 48, 48);
 
-  --color-hypertext: var(--hypertext);
-  --color-hypertext-hover: var(--hypertext-hover);
-  --color-hypertext-active: var(--hypertext-active);
+  --color-success: rgba(0, 204, 102, 1);
+  --color-success-50: rgba(235, 251, 243, 1);
+  --color-success-100: rgba(186, 242, 214, 1);
+  --color-success-200: rgba(121, 232, 180, 1);
+  --color-success-300: rgba(54, 219, 145, 1);
+  --color-success-400: rgba(26, 211, 123, 1);
+  --color-success-500: rgba(0, 184, 92, 1);
+  --color-success-600: rgba(0, 153, 77, 1);
+  --color-success-700: rgba(0, 122, 61, 1);
+  --color-success-800: rgba(0, 92, 46, 1);
+  --color-success-900: rgba(0, 61, 31, 1);
 
-  --color-success: var(--success);
-  --color-warning: var(--warning);
-  --color-error: var(--error);
+  --color-warning: rgba(214, 153, 66);
+  --color-warning-50: rgba(254, 251, 232);
+  --color-warning-100: rgba(255, 246, 194);
+  --color-warning-200: rgba(255, 230, 109);
+  --color-warning-300: rgba(255, 216, 69);
+  --color-warning-400: rgba(252, 193, 19);
+  --color-warning-500: rgba(236, 168, 6);
+  --color-warning-600: rgba(204, 129, 2);
+  --color-warning-700: rgba(162, 90, 6);
+  --color-warning-800: rgba(134, 71, 13);
+  --color-warning-900: rgba(114, 58, 17);
 
-  --color-neutral: var(--neutral);
-  --color-white: var(--white);
-  --color-black: var(--black);
+  --color-error: rgba(181, 24, 13);
+  --color-error-50: rgba(255, 245, 237);
+  --color-error-100: rgba(255, 232, 213);
+  --color-error-200: rgba(254, 206, 170);
+  --color-error-300: rgba(253, 171, 116);
+  --color-error-400: rgba(251, 125, 60);
+  --color-error-500: rgba(249, 90, 22);
+  --color-error-600: rgba(234, 63, 12);
+  --color-error-700: rgba(194, 45, 12);
+  --color-error-800: rgba(154, 37, 18);
+  --color-error-900: rgba(124, 33, 18);
 
+  --color-white: rgba(255, 255, 255);
+
+  --color-black: rgba(0, 0, 0);
+
+  /* `text-inverse` / `foreground-inverse` / `error-foreground` are referenced by
+     Checkbox, Radio and Toast. They had no token of their own, so those
+     variants rendered colourless; they alias the opposite text colour here. */
+  --color-text-inverse: var(--color-text-opposite);
+  --color-foreground-inverse: var(--color-text-opposite);
+  --color-error-foreground: var(--color-text-dark);
+
+  /* The redesign renamed `text-*` to `foreground-*` at the call sites; these
+     keep the fixed light/dark pair reachable under both names. */
+  --color-foreground-dark: var(--color-text-dark);
+  --color-foreground-light: var(--color-text-light);
+
+  /* Shadcn standard theme variables mapped to the design system */
+  --color-foreground: var(--foreground);
+  --color-foreground-opposite: var(--foreground-opposite);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
 }
 
-html {
-  font-family: var(--font-sans);
-}
+@custom-variant dark (:where([data-theme="dark"], [data-theme="dark"] *) &);
+@custom-variant light (:where([data-theme="light"], [data-theme="light"] *) &);
+
+:root,
+[data-theme="light"] {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-light);
+  }
+
+  color-scheme: light;
+
+  --font-sans: "Geist", "Inter", sans-serif;
+
+  --color-background: rgba(255, 255, 255);
+  --color-background-opposite: rgba(18, 18, 18);
+
+  --color-text: rgba(18, 18, 18);
+  --color-text-opposite: rgba(255, 255, 255);
+  --color-text-dark: rgba(255, 255, 255);
+  --color-text-light: rgba(18, 18, 18);
+
+  --color-card: rgba(231, 231, 231);
+  --color-card-hover: rgba(231, 231, 231);
+
+  --color-hypertext: var(--color-text);
+  --color-hypertext-hover: rgba(197, 101, 212);
+  --color-hypertext-active: var(--color-text);
 
-body {
-  background: var(--background);
-  color: var(--foreground);
+  --color-shadow: rgba(18, 18, 18);
+
+  --color-primary: var(--color-text);
+  --color-secondary: rgba(255, 230, 109);
+  --color-neutral: rgba(93, 93, 93);
+
+  --color-success: rgba(0, 204, 102);
+  --color-warning: rgba(214, 153, 66);
+  --color-error: rgba(181, 24, 13);
+
+  --color-white: rgba(255, 255, 255);
+  --color-black: rgba(0, 0, 0);
+
+  /* Shadcn mappings (Light) */
+  --background: var(--color-background);
+  --foreground: var(--color-text);
+  --foreground-opposite: var(--color-text-opposite);
+  --text: var(--color-text);
+  --text-opposite: var(--color-text-opposite);
+  --text-dark: var(--color-text-dark);
+  --text-light: var(--color-text-light);
+  --card: var(--color-card);
+  --card-hover: var(--color-card-hover);
+  --card-foreground: var(--color-text);
+  --popover: var(--color-card);
+  --popover-foreground: var(--color-text);
+  --primary: var(--color-text);
+  --primary-foreground: var(--color-background);
+  --secondary: var(--color-secondary);
+  --secondary-foreground: var(--color-text-light);
+  --muted: var(--color-neutral-100);
+  --muted-foreground: var(--color-neutral-600);
+  --accent: var(--color-card);
+  --accent-foreground: var(--color-text);
+  --hypertext: var(--color-hypertext);
+  --hypertext-hover: var(--color-hypertext-hover);
+  --hypertext-active: var(--color-hypertext-active);
+  --success: var(--color-success);
+  --warning: var(--color-warning);
+  --error: var(--color-error);
+  --neutral: var(--color-neutral);
+  --white: var(--color-white);
+  --black: var(--color-black);
+
+  /* Borders keep the redesign's hairline weight, but as a translucent neutral
+     rather than an opaque grey — the same `neutral` / `neutral-200` split at
+     low alpha that `shiki.css` uses for its own rules. Being translucent, a
+     border darkens whatever sits behind it instead of painting a fixed grey,
+     so it reads correctly over the background and over a card alike. */
+  --border: rgba(93, 93, 93, 0.2);
+  --input: rgba(93, 93, 93, 0.2);
+  --ring: rgba(93, 93, 93, 0.4);
+
+  /* Corner radius also comes from the redesign. */
+  --radius: 0.625rem;
+
+  /* Monaco theme variables */
+  --monaco-background: var(--color-background);
+  --monaco-foreground: var(--color-text);
+  --monaco-border: var(--border);
 }
 
-* {
-  border-color: var(--border);
+[data-theme="dark"] {
+  .shiki,
+  .shiki span {
+    color: var(--shiki-dark);
+  }
+
+  color-scheme: dark;
+
+  --font-sans: "Geist", "Inter", sans-serif;
+
+  --color-background: rgba(23, 23, 23);
+  --color-background-opposite: rgba(255, 255, 255);
+
+  --color-text: rgba(255, 245, 237);
+  --color-text-opposite: rgba(18, 18, 18);
+
+  --color-card: rgba(39, 39, 39);
+  --color-card-hover: rgba(79, 79, 79);
+
+  --color-hypertext: var(--color-text);
+  --color-hypertext-hover: rgba(197, 101, 212);
+  --color-hypertext-active: var(--color-text);
+
+  --color-shadow: rgba(18, 18, 18);
+
+  --color-primary: var(--color-text);
+  --color-secondary: rgba(255, 230, 109);
+  --color-neutral: rgba(93, 93, 93);
+
+  --color-success: rgba(0, 204, 102);
+  --color-warning: rgba(214, 153, 66);
+  --color-error: rgba(181, 24, 13);
+
+  --color-white: rgba(255, 255, 255);
+  --color-black: rgba(0, 0, 0);
+
+  /* Shadcn mappings (Dark) */
+  --background: var(--color-background);
+  --foreground: var(--color-text);
+  --foreground-opposite: var(--color-text-opposite);
+  --text: var(--color-text);
+  --text-opposite: var(--color-text-opposite);
+  --card: var(--color-card);
+  --card-hover: var(--color-card-hover);
+  --card-foreground: var(--color-text);
+  --popover: var(--color-card);
+  --popover-foreground: var(--color-text);
+  --primary: var(--color-text);
+  --primary-foreground: var(--color-background);
+  --secondary: var(--color-secondary);
+  --secondary-foreground: var(--color-text-light);
+  --muted: rgba(79, 79, 79, 1);
+  --muted-foreground: rgba(176, 176, 176, 1);
+  --accent: var(--color-card);
+  --accent-foreground: var(--color-text);
+  --hypertext: var(--color-hypertext);
+  --hypertext-hover: var(--color-hypertext-hover);
+  --hypertext-active: var(--color-hypertext-active);
+  --success: var(--color-success);
+  --warning: var(--color-warning);
+  --error: var(--color-error);
+  --neutral: var(--color-neutral);
+  --white: var(--color-white);
+  --black: var(--color-black);
+
+  /* Redesign borders / rings / radius — see the light block. */
+  --border: rgba(209, 209, 209, 0.2);
+  --input: rgba(209, 209, 209, 0.2);
+  --ring: rgba(209, 209, 209, 0.4);
+  --radius: 0.625rem;
+
+  /* Monaco theme variables */
+  --monaco-background: var(--color-background);
+  --monaco-foreground: var(--color-text);
+  --monaco-border: var(--border);
 }
+
+@plugin "@tailwindcss/aspect-ratio";
+
+@source "../src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
diff --git a/packages/@intlayer/design-system/styles/themes.css b/packages/@intlayer/design-system/styles/themes.css
deleted file mode 100644
index 85485c2f96..0000000000
--- a/packages/@intlayer/design-system/styles/themes.css
+++ /dev/null
@@ -1,99 +0,0 @@
-@custom-variant light (:where([data-theme="light"], [data-theme="light"] *) &);
-@custom-variant dark (:where([data-theme="dark"], [data-theme="dark"] *) &);
-
-:root,
-[data-theme='light'] {
-  .shiki span {
-    color: var(--shiki-light);
-  }
-
-  color-scheme: light;
-
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-
-  --card: oklch(1 0 0);
-  --card-hover: oklch(0.97 0 0);
-
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-
-  --primary: oklch(94.3% 0.3 326);
-  --primary-foreground: oklch(0% 0 0);
-
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-
-  --hypertext: oklch(0.205 0 0);
-  --hypertext-hover: oklch(0.65 0.15 330);
-  --hypertext-active: oklch(0.205 0 0);
-
-  --success: oklch(0.72 0.19 155);
-  --warning: oklch(0.75 0.15 75);
-  --error: oklch(0.55 0.2 25);
-
-  --neutral: oklch(0.58 0 0);
-
-  --white: oklch(1 0 0);
-  --black: oklch(0 0 0);
-
-  --radius: 0.625rem;
-}
-
-[data-theme='dark'] {
-  .shiki span {
-    color: var(--shiki-dark);
-  }
-
-  color-scheme: dark;
-
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-
-  --card: oklch(0.205 0 0);
-  --card-hover: oklch(0.3 0 0);
-
-  --muted: oklch(0.205 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-
-  --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-
-  --primary: oklch(94.3% 0.051 326);
-  --primary-foreground: oklch(0% 0 0);
-
-  --secondary: oklch(0.205 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-
-  --accent: oklch(0.27 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-
-  --border: oklch(0.3 0 0);
-  --input: oklch(0.3 0 0);
-  --ring: oklch(0.556 0 0);
-
-  --hypertext: oklch(0.985 0 0);
-  --hypertext-hover: oklch(0.65 0.15 330);
-  --hypertext-active: oklch(0.985 0 0);
-
-  --success: oklch(0.72 0.19 155);
-  --warning: oklch(0.75 0.15 75);
-  --error: oklch(0.55 0.2 25);
-
-  --neutral: oklch(0.38 0 0);
-
-  --white: oklch(1 0 0);
-  --black: oklch(0 0 0);
-
-  --radius: 0.625rem;
-}

From 37e4a84ba2611c4f9dc0179747992b2d3c70c154 Mon Sep 17 00:00:00 2001
From: Tornado Softwares <tornadogamesfrance@gmail.com>
Date: Tue, 1 Sep 2026 19:44:38 +0200
Subject: [PATCH 30/32] refactor(design-system): reverted css and fixed styles
 for website and cms

---
 .../AdminPage/AdminUsers/UserAdminPage.tsx    |   2 +-
 .../DashboardOverview/DashboardAudience.tsx   |   4 +-
 apps/app/src/components/PricingPage/index.tsx |   2 +-
 .../src/components/SwitchThemeSwitcher.tsx    |   2 +-
 .../SwitchThemeSwitcher.tsx                   |   2 +-
 .../TranslationStatusAside.tsx                |   2 +-
 apps/app/src/styles.css                       | 343 +++++-------------
 .../src/components/ChatBot/ChatBumble.tsx     |   2 +-
 .../src/components/ChatBot/FormSection.tsx    |   4 +-
 .../AsideNavigation/AsideNavigation.tsx       |   2 +-
 .../src/components/I18nBenchmark/index.tsx    |   2 +-
 .../BentoFeaturesSection/ModeSelector.tsx     |   2 +-
 .../LandingPage/DemoSection/index.tsx         |   2 +-
 .../FeaturesSection/IDESection/index.tsx      |   2 +-
 .../LocaleSwitcher/LocaleSwitcher.tsx         |   2 +-
 .../SwitchThemeSwitcher.tsx                   |   2 +-
 .../src/components/Browser/Browser.tsx        |   2 +-
 .../src/components/Carousel/index.tsx         |   4 +-
 .../ContentEditorView/TextEditor.tsx          |   6 +-
 .../LocaleSwitcherContent.tsx                 |   2 +-
 .../MarkDownRender/MarkDownRender.tsx         |   1 +
 .../SwitchSelector/SwitchSelector.tsx         |   8 +-
 .../@intlayer/design-system/styles/fonts.css  |   7 +
 .../design-system/styles/globals.css          | 337 +++--------------
 .../@intlayer/design-system/styles/themes.css |  95 +++++
 25 files changed, 269 insertions(+), 570 deletions(-)
 create mode 100644 packages/@intlayer/design-system/styles/fonts.css
 create mode 100644 packages/@intlayer/design-system/styles/themes.css

diff --git a/apps/app/src/components/Dashboard/AdminPage/AdminUsers/UserAdminPage.tsx b/apps/app/src/components/Dashboard/AdminPage/AdminUsers/UserAdminPage.tsx
index ab694e554a..b880f3c94b 100644
--- a/apps/app/src/components/Dashboard/AdminPage/AdminUsers/UserAdminPage.tsx
+++ b/apps/app/src/components/Dashboard/AdminPage/AdminUsers/UserAdminPage.tsx
@@ -335,7 +335,7 @@ export const UsersAdminPageContent: FC = () => {
         const user = row.original as UserAPI;
         return (
           <SwitchSelector
-            color="foreground"
+            color="text"
             size="sm"
             value={!!user.emailVerified}
             onChange={(checked: boolean) =>
diff --git a/apps/app/src/components/Dashboard/DashboardOverview/DashboardAudience.tsx b/apps/app/src/components/Dashboard/DashboardOverview/DashboardAudience.tsx
index 63e8a9b3cb..b7bc25adcc 100644
--- a/apps/app/src/components/Dashboard/DashboardOverview/DashboardAudience.tsx
+++ b/apps/app/src/components/Dashboard/DashboardOverview/DashboardAudience.tsx
@@ -429,7 +429,7 @@ export const DashboardAudience: FC = () => {
             choices={rangeChoices}
             value={range}
             onChange={setRange}
-            color="foreground"
+            color="text"
             size="sm"
             className="w-max"
           />
@@ -513,7 +513,7 @@ export const DashboardAudience: FC = () => {
                 choices={breakdownChoices}
                 value={tab}
                 onChange={setTab}
-                color="foreground"
+                color="text"
                 size="sm"
                 className="w-full"
               />
diff --git a/apps/app/src/components/PricingPage/index.tsx b/apps/app/src/components/PricingPage/index.tsx
index 72810b64fc..0b9e7746e4 100644
--- a/apps/app/src/components/PricingPage/index.tsx
+++ b/apps/app/src/components/PricingPage/index.tsx
@@ -29,7 +29,7 @@ export const PricingPage: FC<PricingPageProps> = ({ pricings }) => {
           { content: periodSwitchLabel.yearly.value, value: Period.Yearly },
           { content: periodSwitchLabel.monthly.value, value: Period.Monthly },
         ]}
-        color="foreground"
+        color="text"
         onChange={setFocusedPeriod}
         value={focusedPeriod}
       />
diff --git a/apps/app/src/components/SwitchThemeSwitcher.tsx b/apps/app/src/components/SwitchThemeSwitcher.tsx
index 426d63c000..290804e508 100644
--- a/apps/app/src/components/SwitchThemeSwitcher.tsx
+++ b/apps/app/src/components/SwitchThemeSwitcher.tsx
@@ -34,7 +34,7 @@ export const SwitchThemeSwitcher: FC = () => {
       choices={themeSwitcher}
       value={resolvedTheme as Modes}
       onChange={setTheme}
-      color="foreground"
+      color="text"
       size="xs"
     />
   );
diff --git a/apps/app/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx b/apps/app/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
index d030916b70..1350388cda 100644
--- a/apps/app/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
+++ b/apps/app/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
@@ -40,7 +40,7 @@ export const SwitchThemeSwitcher: FC = () => {
       choices={themeSwitcher}
       value={resolvedTheme}
       onChange={setTheme}
-      color="foreground"
+      color="text"
       size="sm"
     />
   );
diff --git a/apps/app/src/components/TranslationStatusAside/TranslationStatusAside.tsx b/apps/app/src/components/TranslationStatusAside/TranslationStatusAside.tsx
index 014fa98805..804a7eb73e 100644
--- a/apps/app/src/components/TranslationStatusAside/TranslationStatusAside.tsx
+++ b/apps/app/src/components/TranslationStatusAside/TranslationStatusAside.tsx
@@ -713,7 +713,7 @@ export const TranslationStatusAside: FC = () => {
                   ]}
                   value={selectSpecific}
                   onChange={setSelectSpecific}
-                  color="foreground"
+                  color="text"
                   size="sm"
                   className="w-full"
                 />
diff --git a/apps/app/src/styles.css b/apps/app/src/styles.css
index 265939dae2..7d04879ef6 100644
--- a/apps/app/src/styles.css
+++ b/apps/app/src/styles.css
@@ -1,5 +1,5 @@
-@import "@intlayer/design-system/css";
 @import "tailwindcss";
+@import "@intlayer/design-system/css";
 @import "./shiki.css";
 @import "./monaco.css";
 /* MarkdownEditor (Novel/Tiptap) styles — only the CMS dashboard uses that
@@ -8,297 +8,134 @@
 @import "@intlayer/design-system/markdown-editor.css";
 
 @layer base {
-  html {
-    font-size: 12px; /* Reduced base font size to match previous Next.js app scaling */
-  }
-
-  /* 1. Standard Scale (Landing Page) */
-  :root {
-    --text-3xl: 1.875rem; /* 30px */
-    --text-3xl-leading: 2.25rem; /* 36px */
-
-    /* Add text-base for context */
-    --text-base: 1rem; /* 16px */
-    --text-base-leading: 1.5rem; /* 24px */
-  }
-}
-
-@theme {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(255, 255, 255);
-  --color-background-opposite: rgba(18, 18, 18);
-
-  --color-text: rgba(18, 18, 18);
-  --color-text-opposite: rgba(255, 255, 255);
-  --color-text-dark: rgba(255, 255, 255);
-  --color-text-light: rgba(18, 18, 18);
-
-  --color-card: rgba(231, 231, 231);
-  --color-card-hover: rgba(231, 231, 231);
-
-  --color-hypertext: rgba(203, 235, 64);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: rgba(203, 235, 64);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: rgba(203, 235, 64);
-  --color-primary-50: rgba(249, 253, 230);
-  --color-primary-100: rgba(238, 248, 186);
-  --color-primary-200: rgba(226, 243, 143);
-  --color-primary-300: rgba(215, 239, 105);
-  --color-primary-400: rgba(203, 235, 64);
-  --color-primary-500: rgba(182, 211, 57);
-  --color-primary-600: rgba(153, 177, 48);
-  --color-primary-700: rgba(116, 134, 37);
-  --color-primary-800: rgba(92, 106, 29);
-  --color-primary-900: rgba(67, 77, 21);
-  --color-primary-950: rgba(40, 46, 12);
+	html {
+		font-size: 12px;
+		/* Reduced base font size to match previous Next.js app scaling */
+	}
 
-  --color-secondary: rgba(255, 230, 109);
-  --color-secondary-50: rgba(254, 251, 232);
-  --color-secondary-100: rgba(255, 246, 194);
-  --color-secondary-200: rgba(255, 230, 109);
-  --color-secondary-300: rgba(255, 216, 69);
-  --color-secondary-400: rgba(252, 193, 19);
-  --color-secondary-500: rgba(236, 168, 6);
-  --color-secondary-600: rgba(204, 129, 2);
-  --color-secondary-700: rgba(162, 90, 6);
-  --color-secondary-800: rgba(134, 71, 13);
-  --color-secondary-900: rgba(114, 58, 17);
-  --color-secondary-950: rgba(67, 29, 5);
+	/* 1. Standard Scale (Landing Page) */
+	:root {
+		--text-3xl: 1.875rem;
+		/* 30px */
+		--text-3xl-leading: 2.25rem;
+		/* 36px */
 
-  --color-neutral: rgba(93, 93, 93);
-  --color-neutral-50: rgba(249, 249, 249);
-  --color-neutral-100: rgba(231, 231, 231);
-  --color-neutral-200: rgba(209, 209, 209);
-  --color-neutral-300: rgba(176, 176, 176);
-  --color-neutral-400: rgba(136, 136, 136);
-  --color-neutral-500: rgba(109, 109, 109);
-  --color-neutral-600: rgba(93, 93, 93);
-  --color-neutral-700: rgba(79, 79, 79);
-  --color-neutral-800: rgba(69, 69, 69);
-  --color-neutral-900: rgba(61, 61, 61);
-  --color-neutral-950: rgba(48, 48, 48);
-
-  --color-success: rgba(0, 204, 102);
-  --color-success-50: rgba(254, 244, 255);
-  --color-success-100: rgba(252, 232, 255);
-  --color-success-200: rgba(248, 208, 254);
-  --color-success-300: rgba(241, 171, 252);
-  --color-success-400: rgba(203, 235, 64);
-  --color-success-500: rgba(197, 101, 212);
-  --color-success-600: rgba(163, 81, 175);
-  --color-success-700: rgba(128, 61, 139);
-  --color-success-800: rgba(93, 41, 102);
-  --color-success-900: rgba(59, 21, 65);
-
-  --color-warning: rgba(214, 153, 66);
-  --color-warning-50: rgba(254, 251, 232);
-  --color-warning-100: rgba(255, 246, 194);
-  --color-warning-200: rgba(255, 230, 109);
-  --color-warning-300: rgba(255, 216, 69);
-  --color-warning-400: rgba(252, 193, 19);
-  --color-warning-500: rgba(236, 168, 6);
-  --color-warning-600: rgba(204, 129, 2);
-  --color-warning-700: rgba(162, 90, 6);
-  --color-warning-800: rgba(134, 71, 13);
-  --color-warning-900: rgba(114, 58, 17);
-
-  --color-error: rgba(181, 24, 13);
-  --color-error-50: rgba(255, 245, 237);
-  --color-error-100: rgba(255, 232, 213);
-  --color-error-200: rgba(254, 206, 170);
-  --color-error-300: rgba(253, 171, 116);
-  --color-error-400: rgba(251, 125, 60);
-  --color-error-500: rgba(249, 90, 22);
-  --color-error-600: rgba(234, 63, 12);
-  --color-error-700: rgba(194, 45, 12);
-  --color-error-800: rgba(154, 37, 18);
-  --color-error-900: rgba(124, 33, 18);
-
-  --color-white: rgba(255, 255, 255);
-
-  --color-black: rgba(0, 0, 0);
+		/* Add text-base for context */
+		--text-base: 1rem;
+		/* 16px */
+		--text-base-leading: 1.5rem;
+		/* 24px */
+	}
 }
 
-@variant dark 
-(
-:where([data-theme="dark"], [data-theme="dark"] *) &);
-@variant light (:where([data-theme="light"], [data-theme="light"] *) &);
-
-:root,
-[data-theme="light"] {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(255, 255, 255);
-  --color-background-opposite: rgba(18, 18, 18);
-
-  --color-text: rgba(18, 18, 18);
-  --color-text-opposite: rgba(255, 255, 255);
-  --color-text-dark: rgba(255, 255, 255);
-  --color-text-light: rgba(18, 18, 18);
-
-  --color-card: rgba(231, 231, 231);
-  --color-card-hover: rgba(231, 231, 231);
-
-  --color-hypertext: rgba(203, 235, 64);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: rgba(203, 235, 64);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: rgba(203, 235, 64);
-  --color-secondary: rgba(255, 230, 109);
-  --color-neutral: rgba(93, 93, 93);
-
-  --color-success: rgba(0, 204, 102);
-  --color-warning: rgba(214, 153, 66);
-  --color-error: rgba(181, 24, 13);
-
-  --color-white: rgba(255, 255, 255);
-  --color-black: rgba(0, 0, 0);
-  
-  --navbar-height: 64px;
-}
-
-[data-theme="dark"] {
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(23, 23, 23);
-  --color-background-opposite: rgba(255, 255, 255);
-
-  --color-text: rgba(255, 245, 237);
-  --color-text-opposite: rgba(18, 18, 18);
-
-  --color-card: rgba(39, 39, 39);
-  --color-card-hover: rgba(79, 79, 79);
-
-  --color-hypertext: rgba(203, 235, 64);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: rgba(203, 235, 64);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: rgba(203, 235, 64);
-  --color-secondary: rgba(255, 230, 109);
-  --color-neutral: rgba(93, 93, 93);
-
-  --color-success: rgba(0, 204, 102);
-  --color-warning: rgba(214, 153, 66);
-  --color-error: rgba(181, 24, 13);
-
-  --color-white: rgba(255, 255, 255);
-  --color-black: rgba(0, 0, 0);
-  
-  --navbar-height: 64px;
-}
 
 /* Price range slider thumb styles */
 .price-range-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  pointer-events: none;
-  background: transparent;
-  outline: none;
+	-webkit-appearance: none;
+	appearance: none;
+	pointer-events: none;
+	background: transparent;
+	outline: none;
 }
+
 .price-range-thumb::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  pointer-events: all;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--color-text);
-  border: 2px solid var(--color-card);
-  cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	-webkit-appearance: none;
+	appearance: none;
+	pointer-events: all;
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	background: var(--color-text);
+	border: 2px solid var(--color-card);
+	cursor: pointer;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
+
 .price-range-thumb::-moz-range-thumb {
-  pointer-events: all;
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  background: var(--color-text);
-  border: 2px solid var(--color-card);
-  cursor: pointer;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+	pointer-events: all;
+	width: 18px;
+	height: 18px;
+	border-radius: 50%;
+	background: var(--color-text);
+	border: 2px solid var(--color-card);
+	cursor: pointer;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
+
 .price-range-thumb::-webkit-slider-runnable-track {
-  background: transparent;
+	background: transparent;
 }
+
 .price-range-thumb::-moz-range-track {
-  background: transparent;
+	background: transparent;
 }
 
-@plugin '@tailwindcss/aspect-ratio';
-
-@source "./src/**/*.{ts,tsx,svg}";
-@source "../node_modules/@intlayer/design-system/dist/**/*.{js,jsx,mjs,ts,tsx,svg}";
-
 
 
 @keyframes shrink-title {
-  to {
-    font-size: 1.2rem;
-    padding-top: 0.8rem;
-    padding-bottom: 0.6rem;
-  }
+	to {
+		font-size: 1.2rem;
+		padding-top: 0.8rem;
+		padding-bottom: 0.6rem;
+	}
 }
 
 @keyframes infiniteScroll {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-50%);
-  }
+	from {
+		transform: translateX(0);
+	}
+
+	to {
+		transform: translateX(-50%);
+	}
 }
 
 @keyframes infiniteScrollInverse {
-  from {
-    transform: translateX(-50%);
-  }
-  to {
-    transform: translateX(0);
-  }
+	from {
+		transform: translateX(-50%);
+	}
+
+	to {
+		transform: translateX(0);
+	}
 }
 
 @keyframes float {
-  0%,
-  100% {
-    transform: translateY(0);
-  }
-  50% {
-    transform: translateY(var(--float-distance, 10px));
-  }
+
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+
+	50% {
+		transform: translateY(var(--float-distance, 10px));
+	}
 }
 
 .horizontal-loop-1 {
-  animation-name: infiniteScroll;
-  animation-duration: 85s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+	animation-name: infiniteScroll;
+	animation-duration: 85s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
 }
 
 .horizontal-loop-2 {
-  animation-name: infiniteScrollInverse;
-  animation-duration: 45s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+	animation-name: infiniteScrollInverse;
+	animation-duration: 45s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
 }
 
 .horizontal-loop-4 {
-  animation-name: infiniteScroll;
-  animation-duration: 50s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
+	animation-name: infiniteScroll;
+	animation-duration: 50s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
 }
 
 .animate-float {
-  animation-name: float;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-in-out;
+	animation-name: float;
+	animation-duration: 3s;
+	animation-iteration-count: infinite;
+	animation-timing-function: ease-in-out;
 }
diff --git a/apps/website/src/components/ChatBot/ChatBumble.tsx b/apps/website/src/components/ChatBot/ChatBumble.tsx
index 3425a49e03..a58d25a518 100644
--- a/apps/website/src/components/ChatBot/ChatBumble.tsx
+++ b/apps/website/src/components/ChatBot/ChatBumble.tsx
@@ -21,7 +21,7 @@ export const ChatBumble: FC<ChatBumbleProps> = ({
     <div
       className={cn(
         type === ChatBumbleType.QUESTION &&
-          'mr-4 ml-auto w-auto max-w-[90%] whitespace-pre-wrap rounded-lg rounded-tr-none bg-text/95 px-8 py-2 text-foreground',
+          'mr-4 ml-auto w-auto max-w-[90%] whitespace-pre-wrap rounded-lg rounded-tr-none bg-card px-8 py-2 text-foreground',
         type === ChatBumbleType.ANSWER && 'w-full px-4'
       )}
       {...props}
diff --git a/apps/website/src/components/ChatBot/FormSection.tsx b/apps/website/src/components/ChatBot/FormSection.tsx
index 6d7c52fd47..c1968a27ec 100644
--- a/apps/website/src/components/ChatBot/FormSection.tsx
+++ b/apps/website/src/components/ChatBot/FormSection.tsx
@@ -159,7 +159,7 @@ export const FormSection: FC<FormSectionProps> = ({
         <FormButton
           label={clearButton.label.value}
           type="button"
-          color="foreground"
+          color="text"
           variant="outline"
           size="icon-md"
           disabled={isSubmitting || isLoading || !hasClearButton}
@@ -171,7 +171,7 @@ export const FormSection: FC<FormSectionProps> = ({
         <FormButton
           label={sendQuestionButton.label.value}
           type="submit"
-          color="foreground"
+          color="text"
           isLoading={isSubmitting || isLoading}
           Icon={ArrowUp}
           size="icon-md"
diff --git a/apps/website/src/components/DocPage/AsideNavigation/AsideNavigation.tsx b/apps/website/src/components/DocPage/AsideNavigation/AsideNavigation.tsx
index 96cde6bd1f..7f3fba4819 100644
--- a/apps/website/src/components/DocPage/AsideNavigation/AsideNavigation.tsx
+++ b/apps/website/src/components/DocPage/AsideNavigation/AsideNavigation.tsx
@@ -45,7 +45,7 @@ export const AsideNavigation: FC = () => {
                 additionalButtons={
                   <Button
                     Icon={MoveDiagonal}
-                    color="foreground"
+                    color="text"
                     size="icon-md"
                     variant="outline"
                     label={button.label.value}
diff --git a/apps/website/src/components/I18nBenchmark/index.tsx b/apps/website/src/components/I18nBenchmark/index.tsx
index ae89e91e1f..ac3df00de4 100644
--- a/apps/website/src/components/I18nBenchmark/index.tsx
+++ b/apps/website/src/components/I18nBenchmark/index.tsx
@@ -388,7 +388,7 @@ export const I18nBenchmark = ({
                       size="sm"
                       value={value}
                       onChange={onChange}
-                      color="foreground"
+                      color="text"
                     />
                   </div>
                 ))}
diff --git a/apps/website/src/components/LandingPage/BentoFeaturesSection/ModeSelector.tsx b/apps/website/src/components/LandingPage/BentoFeaturesSection/ModeSelector.tsx
index d33354fa61..8e11b9676a 100644
--- a/apps/website/src/components/LandingPage/BentoFeaturesSection/ModeSelector.tsx
+++ b/apps/website/src/components/LandingPage/BentoFeaturesSection/ModeSelector.tsx
@@ -15,7 +15,7 @@ export const ModeSelector = () => {
       value={mode}
       onChange={setMode}
       size="sm"
-      color="foreground"
+      color="text"
       itemClassName="text-nowrap"
     />
   );
diff --git a/apps/website/src/components/LandingPage/DemoSection/index.tsx b/apps/website/src/components/LandingPage/DemoSection/index.tsx
index d1db2c00e8..a458a8ac78 100644
--- a/apps/website/src/components/LandingPage/DemoSection/index.tsx
+++ b/apps/website/src/components/LandingPage/DemoSection/index.tsx
@@ -51,7 +51,7 @@ export const DemoSection: FC = () => {
             defaultValue={demoType}
             onChange={setDemoType}
             itemClassName="text-nowrap"
-            color="foreground"
+            color="text"
             size="sm"
           />
         </div>
diff --git a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/index.tsx b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/index.tsx
index 69d7756e98..dce7dde5f1 100644
--- a/apps/website/src/components/LandingPage/FeaturesSection/IDESection/index.tsx
+++ b/apps/website/src/components/LandingPage/FeaturesSection/IDESection/index.tsx
@@ -181,7 +181,7 @@ export const IDESection: FC<IDESectionProps> = ({ scrollProgress }) => {
           value={mode}
           onChange={setMode}
           size="sm"
-          color="foreground"
+          color="text"
           itemClassName="text-nowrap"
         />
         <FrameworkSelector />
diff --git a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
index fef8946286..4ab904fe7d 100644
--- a/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
+++ b/apps/website/src/components/LocaleSwitcher/LocaleSwitcher.tsx
@@ -61,7 +61,7 @@ export const LocaleSwitcher: FC<LocaleSwitcherProps> = ({
           size="sm"
           className="p-0!"
           variant="outline"
-          color="foreground"
+          color="text"
           roundedSize="5xl"
           onClick={handleFocusInput}
         >
diff --git a/apps/website/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx b/apps/website/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
index 71fc5d20d1..e1e0bdd5cf 100644
--- a/apps/website/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
+++ b/apps/website/src/components/ThemeSwitcherDropDown/SwitchThemeSwitcher.tsx
@@ -40,7 +40,7 @@ export const SwitchThemeSwitcher: FC = () => {
       choices={themeSwitcher}
       value={resolvedTheme}
       onChange={setTheme}
-      color="foreground"
+      color="text"
       size="sm"
     />
   );
diff --git a/packages/@intlayer/design-system/src/components/Browser/Browser.tsx b/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
index c4e4c73c6c..df701f28bb 100644
--- a/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
+++ b/packages/@intlayer/design-system/src/components/Browser/Browser.tsx
@@ -352,7 +352,7 @@ export const Browser = ({
       aria-label={ariaLabel ?? content.ariaLabel.value}
     >
       {/* Top bar */}
-      <div className="relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl border-b bg-text/15 px-4 py-2">
+      <div className="relative z-10 flex shrink-0 items-center gap-3 rounded-t-xl border-b bg-card px-4 py-2">
         {/* Navigation Controls */}
         <div className="flex items-center gap-1">
           <Button
diff --git a/packages/@intlayer/design-system/src/components/Carousel/index.tsx b/packages/@intlayer/design-system/src/components/Carousel/index.tsx
index 621f1af02f..35dd69fa1b 100644
--- a/packages/@intlayer/design-system/src/components/Carousel/index.tsx
+++ b/packages/@intlayer/design-system/src/components/Carousel/index.tsx
@@ -196,8 +196,8 @@ const CarouselIndicators: FC<CarouselIndicatorsProps> = ({
             }}
             aria-label={goToSlide({ index: index + 1 }).value}
             className={cn(
-              'h-2.5 w-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',
-              isActive ? 'scale-110 bg-text' : 'bg-text/20 hover:bg-text/40'
+              'size-2.5 rounded-full transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2',
+              isActive ? 'size-3.5 bg-text' : 'bg-text/20 hover:bg-text/40'
             )}
           />
         );
diff --git a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
index c60803bafc..9eaba268c3 100644
--- a/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
+++ b/packages/@intlayer/design-system/src/components/DictionaryFieldEditor/ContentEditorView/TextEditor.tsx
@@ -223,7 +223,7 @@ const ContentEditorToggle: FC<ContentEditorToggleProps> = ({
       onChange={(value) =>
         addEditedContent(dictionary.localId!, value, keyPath)
       }
-      color="foreground"
+      color="text"
       size="sm"
       {...props}
     />
@@ -883,7 +883,7 @@ const HtmlTextEditor: FC<TextEditorProps> = ({
         choices={toggleContent}
         value={mode}
         onChange={setMode}
-        color="foreground"
+        color="text"
         size="sm"
         className="ml-auto"
       />
@@ -970,7 +970,7 @@ const MarkdownTextEditor: FC<TextEditorProps> = ({
         choices={toggleContent}
         value={mode}
         onChange={setMode}
-        color="foreground"
+        color="text"
         size="sm"
         className="ml-auto"
       />
diff --git a/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx b/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
index 887a9163ff..5522d3f558 100644
--- a/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
+++ b/packages/@intlayer/design-system/src/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.tsx
@@ -157,7 +157,7 @@ export const LocaleSwitcherContent: FC<LocaleSwitcherContentProps> = ({
                 <SwitchSelector
                   defaultValue={seeAllLocales} // Ensure this uses the persisted state
                   onChange={handleSeeAllLocales}
-                  color="foreground"
+                  color="text"
                   size="sm"
                   className="!w-60"
                   choices={[
diff --git a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
index e7ff43a860..470276286b 100644
--- a/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
+++ b/packages/@intlayer/design-system/src/components/MarkDownRender/MarkDownRender.tsx
@@ -74,6 +74,7 @@ const MemoizedCodeBlock = memo(
         language={language}
         showHeader
         highlightedHtml={highlightedHtml}
+        className="border"
       >
         {content}
       </Code>
diff --git a/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx b/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
index e95665958c..b6c92b069d 100644
--- a/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
+++ b/packages/@intlayer/design-system/src/components/SwitchSelector/SwitchSelector.tsx
@@ -22,7 +22,7 @@ export type SwitchSelectorColor =
   | 'neutral'
   | 'white'
   | 'black'
-  | 'foreground'
+  | 'text'
   | 'error';
 
 export type SwitchSelectorSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -53,7 +53,7 @@ export const switchSelectorVariant = cva(
         neutral: 'border-neutral text-neutral',
         white: 'border-white text-white',
         black: 'border-black text-black',
-        foreground: 'border-foreground text-foreground',
+        text: 'border-foreground text-foreground',
         error: 'border-error text-error',
       },
       disabled: {
@@ -62,7 +62,7 @@ export const switchSelectorVariant = cva(
       },
     },
     defaultVariants: {
-      color: 'foreground',
+      color: 'text',
       disabled: false,
     },
   }
@@ -96,7 +96,7 @@ export const indicatorVariant = cva(
         neutral: 'bg-neutral data-[indicator=true]:text-white',
         white: 'bg-white data-[indicator=true]:text-black',
         black: 'bg-black data-[indicator=true]:text-white',
-        foreground: 'bg-foreground data-[indicator=true]:text-background',
+        text: 'bg-foreground data-[indicator=true]:text-background',
         error: 'bg-error data-[indicator=true]:text-white',
       },
     },
diff --git a/packages/@intlayer/design-system/styles/fonts.css b/packages/@intlayer/design-system/styles/fonts.css
new file mode 100644
index 0000000000..50f51af7de
--- /dev/null
+++ b/packages/@intlayer/design-system/styles/fonts.css
@@ -0,0 +1,7 @@
+@font-face {
+  font-family: 'Geist';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('/Geist-VariableFont_wght.ttf') format('truetype');
+}
diff --git a/packages/@intlayer/design-system/styles/globals.css b/packages/@intlayer/design-system/styles/globals.css
index f981953482..5b4c196b4a 100644
--- a/packages/@intlayer/design-system/styles/globals.css
+++ b/packages/@intlayer/design-system/styles/globals.css
@@ -1,312 +1,71 @@
-@font-face {
-  font-family: "Geist";
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src:
-    url("/Geist-VariableFont_wght.woff2") format("woff2"),
-    url("/Geist-VariableFont_wght.ttf") format("truetype");
-}
+@import 'tailwindcss';
 
-@theme {
-  --font-sans: "Geist", "Inter", sans-serif;
+@import 'fonts.css';
+@import 'themes.css';
 
-  --color-background: rgba(255, 255, 255);
-  --color-background-opposite: rgba(18, 18, 18);
+@plugin "@tailwindcss/aspect-ratio";
+@source "../src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
 
-  --color-text: rgba(18, 18, 18);
-  --color-text-opposite: rgba(255, 255, 255);
-  --color-text-dark: rgba(255, 255, 255);
-  --color-text-light: rgba(18, 18, 18);
 
-  --color-card: rgba(29, 29, 29);
-  --color-card-hover: rgba(29, 29, 29);
+@theme {
+	--font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
 
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
 
-  --color-shadow: rgba(18, 18, 18);
+	--color-text: var(--foreground);
+	--color-text-opposite: var(--background);
+	--color-foreground-opposite: var(--background);
+	--color-neutral: var(--color-foreground);
 
-  --color-primary: var(--color-text);
-  --color-primary-50: rgba(249, 253, 230);
-  --color-primary-100: rgba(238, 248, 186);
-  --color-primary-200: rgba(226, 243, 143);
-  --color-primary-300: rgba(215, 239, 105);
-  --color-primary-400: var(--color-text);
-  --color-primary-500: rgba(182, 211, 57);
-  --color-primary-600: rgba(153, 177, 48);
-  --color-primary-700: rgba(116, 134, 37);
-  --color-primary-800: rgba(92, 106, 29);
-  --color-primary-900: rgba(67, 77, 21);
-  --color-primary-950: rgba(40, 46, 12);
+	--color-card: var(--card);
+	--color-card-hover: var(--card-hover);
 
-  --color-secondary: rgba(255, 230, 109);
-  --color-secondary-50: rgba(254, 251, 232);
-  --color-secondary-100: rgba(255, 246, 194);
-  --color-secondary-200: rgba(255, 230, 109);
-  --color-secondary-300: rgba(255, 216, 69);
-  --color-secondary-400: rgba(252, 193, 19);
-  --color-secondary-500: rgba(236, 168, 6);
-  --color-secondary-600: rgba(204, 129, 2);
-  --color-secondary-700: rgba(162, 90, 6);
-  --color-secondary-800: rgba(134, 71, 13);
-  --color-secondary-900: rgba(114, 58, 17);
-  --color-secondary-950: rgba(67, 29, 5);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
 
-  --color-neutral: rgba(93, 93, 93);
-  --color-neutral-50: rgba(249, 249, 249);
-  --color-neutral-100: rgba(231, 231, 231);
-  --color-neutral-200: rgba(209, 209, 209);
-  --color-neutral-300: rgba(176, 176, 176);
-  --color-neutral-400: rgba(136, 136, 136);
-  --color-neutral-500: rgba(109, 109, 109);
-  --color-neutral-600: rgba(93, 93, 93);
-  --color-neutral-700: rgba(79, 79, 79);
-  --color-neutral-800: rgba(69, 69, 69);
-  --color-neutral-900: rgba(61, 61, 61);
-  --color-neutral-950: rgba(48, 48, 48);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
 
-  --color-success: rgba(0, 204, 102, 1);
-  --color-success-50: rgba(235, 251, 243, 1);
-  --color-success-100: rgba(186, 242, 214, 1);
-  --color-success-200: rgba(121, 232, 180, 1);
-  --color-success-300: rgba(54, 219, 145, 1);
-  --color-success-400: rgba(26, 211, 123, 1);
-  --color-success-500: rgba(0, 184, 92, 1);
-  --color-success-600: rgba(0, 153, 77, 1);
-  --color-success-700: rgba(0, 122, 61, 1);
-  --color-success-800: rgba(0, 92, 46, 1);
-  --color-success-900: rgba(0, 61, 31, 1);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
 
-  --color-warning: rgba(214, 153, 66);
-  --color-warning-50: rgba(254, 251, 232);
-  --color-warning-100: rgba(255, 246, 194);
-  --color-warning-200: rgba(255, 230, 109);
-  --color-warning-300: rgba(255, 216, 69);
-  --color-warning-400: rgba(252, 193, 19);
-  --color-warning-500: rgba(236, 168, 6);
-  --color-warning-600: rgba(204, 129, 2);
-  --color-warning-700: rgba(162, 90, 6);
-  --color-warning-800: rgba(134, 71, 13);
-  --color-warning-900: rgba(114, 58, 17);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
 
-  --color-error: rgba(181, 24, 13);
-  --color-error-50: rgba(255, 245, 237);
-  --color-error-100: rgba(255, 232, 213);
-  --color-error-200: rgba(254, 206, 170);
-  --color-error-300: rgba(253, 171, 116);
-  --color-error-400: rgba(251, 125, 60);
-  --color-error-500: rgba(249, 90, 22);
-  --color-error-600: rgba(234, 63, 12);
-  --color-error-700: rgba(194, 45, 12);
-  --color-error-800: rgba(154, 37, 18);
-  --color-error-900: rgba(124, 33, 18);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
 
-  --color-white: rgba(255, 255, 255);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
 
-  --color-black: rgba(0, 0, 0);
+	--color-hypertext: var(--hypertext);
+	--color-hypertext-hover: var(--hypertext-hover);
+	--color-hypertext-active: var(--hypertext-active);
 
-  /* `text-inverse` / `foreground-inverse` / `error-foreground` are referenced by
-     Checkbox, Radio and Toast. They had no token of their own, so those
-     variants rendered colourless; they alias the opposite text colour here. */
-  --color-text-inverse: var(--color-text-opposite);
-  --color-foreground-inverse: var(--color-text-opposite);
-  --color-error-foreground: var(--color-text-dark);
+	--color-success: var(--success);
+	--color-warning: var(--warning);
+	--color-error: var(--error);
 
-  /* The redesign renamed `text-*` to `foreground-*` at the call sites; these
-     keep the fixed light/dark pair reachable under both names. */
-  --color-foreground-dark: var(--color-text-dark);
-  --color-foreground-light: var(--color-text-light);
+	--color-neutral: var(--neutral);
+	--color-white: var(--white);
+	--color-black: var(--black);
 
-  /* Shadcn standard theme variables mapped to the design system */
-  --color-foreground: var(--foreground);
-  --color-foreground-opposite: var(--foreground-opposite);
-  --color-card-foreground: var(--card-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
+	--radius-lg: var(--radius);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 4px);
 }
 
-@custom-variant dark (:where([data-theme="dark"], [data-theme="dark"] *) &);
-@custom-variant light (:where([data-theme="light"], [data-theme="light"] *) &);
-
-:root,
-[data-theme="light"] {
-  .shiki,
-  .shiki span {
-    color: var(--shiki-light);
-  }
-
-  color-scheme: light;
-
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(255, 255, 255);
-  --color-background-opposite: rgba(18, 18, 18);
-
-  --color-text: rgba(18, 18, 18);
-  --color-text-opposite: rgba(255, 255, 255);
-  --color-text-dark: rgba(255, 255, 255);
-  --color-text-light: rgba(18, 18, 18);
-
-  --color-card: rgba(231, 231, 231);
-  --color-card-hover: rgba(231, 231, 231);
-
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: var(--color-text);
-  --color-secondary: rgba(255, 230, 109);
-  --color-neutral: rgba(93, 93, 93);
-
-  --color-success: rgba(0, 204, 102);
-  --color-warning: rgba(214, 153, 66);
-  --color-error: rgba(181, 24, 13);
-
-  --color-white: rgba(255, 255, 255);
-  --color-black: rgba(0, 0, 0);
-
-  /* Shadcn mappings (Light) */
-  --background: var(--color-background);
-  --foreground: var(--color-text);
-  --foreground-opposite: var(--color-text-opposite);
-  --text: var(--color-text);
-  --text-opposite: var(--color-text-opposite);
-  --text-dark: var(--color-text-dark);
-  --text-light: var(--color-text-light);
-  --card: var(--color-card);
-  --card-hover: var(--color-card-hover);
-  --card-foreground: var(--color-text);
-  --popover: var(--color-card);
-  --popover-foreground: var(--color-text);
-  --primary: var(--color-text);
-  --primary-foreground: var(--color-background);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-text-light);
-  --muted: var(--color-neutral-100);
-  --muted-foreground: var(--color-neutral-600);
-  --accent: var(--color-card);
-  --accent-foreground: var(--color-text);
-  --hypertext: var(--color-hypertext);
-  --hypertext-hover: var(--color-hypertext-hover);
-  --hypertext-active: var(--color-hypertext-active);
-  --success: var(--color-success);
-  --warning: var(--color-warning);
-  --error: var(--color-error);
-  --neutral: var(--color-neutral);
-  --white: var(--color-white);
-  --black: var(--color-black);
-
-  /* Borders keep the redesign's hairline weight, but as a translucent neutral
-     rather than an opaque grey — the same `neutral` / `neutral-200` split at
-     low alpha that `shiki.css` uses for its own rules. Being translucent, a
-     border darkens whatever sits behind it instead of painting a fixed grey,
-     so it reads correctly over the background and over a card alike. */
-  --border: rgba(93, 93, 93, 0.2);
-  --input: rgba(93, 93, 93, 0.2);
-  --ring: rgba(93, 93, 93, 0.4);
-
-  /* Corner radius also comes from the redesign. */
-  --radius: 0.625rem;
-
-  /* Monaco theme variables */
-  --monaco-background: var(--color-background);
-  --monaco-foreground: var(--color-text);
-  --monaco-border: var(--border);
+html {
+	font-family: var(--font-sans);
 }
 
-[data-theme="dark"] {
-  .shiki,
-  .shiki span {
-    color: var(--shiki-dark);
-  }
-
-  color-scheme: dark;
-
-  --font-sans: "Geist", "Inter", sans-serif;
-
-  --color-background: rgba(23, 23, 23);
-  --color-background-opposite: rgba(255, 255, 255);
-
-  --color-text: rgba(255, 245, 237);
-  --color-text-opposite: rgba(18, 18, 18);
-
-  --color-card: rgba(39, 39, 39);
-  --color-card-hover: rgba(79, 79, 79);
-
-  --color-hypertext: var(--color-text);
-  --color-hypertext-hover: rgba(197, 101, 212);
-  --color-hypertext-active: var(--color-text);
-
-  --color-shadow: rgba(18, 18, 18);
-
-  --color-primary: var(--color-text);
-  --color-secondary: rgba(255, 230, 109);
-  --color-neutral: rgba(93, 93, 93);
-
-  --color-success: rgba(0, 204, 102);
-  --color-warning: rgba(214, 153, 66);
-  --color-error: rgba(181, 24, 13);
-
-  --color-white: rgba(255, 255, 255);
-  --color-black: rgba(0, 0, 0);
-
-  /* Shadcn mappings (Dark) */
-  --background: var(--color-background);
-  --foreground: var(--color-text);
-  --foreground-opposite: var(--color-text-opposite);
-  --text: var(--color-text);
-  --text-opposite: var(--color-text-opposite);
-  --card: var(--color-card);
-  --card-hover: var(--color-card-hover);
-  --card-foreground: var(--color-text);
-  --popover: var(--color-card);
-  --popover-foreground: var(--color-text);
-  --primary: var(--color-text);
-  --primary-foreground: var(--color-background);
-  --secondary: var(--color-secondary);
-  --secondary-foreground: var(--color-text-light);
-  --muted: rgba(79, 79, 79, 1);
-  --muted-foreground: rgba(176, 176, 176, 1);
-  --accent: var(--color-card);
-  --accent-foreground: var(--color-text);
-  --hypertext: var(--color-hypertext);
-  --hypertext-hover: var(--color-hypertext-hover);
-  --hypertext-active: var(--color-hypertext-active);
-  --success: var(--color-success);
-  --warning: var(--color-warning);
-  --error: var(--color-error);
-  --neutral: var(--color-neutral);
-  --white: var(--color-white);
-  --black: var(--color-black);
-
-  /* Redesign borders / rings / radius — see the light block. */
-  --border: rgba(209, 209, 209, 0.2);
-  --input: rgba(209, 209, 209, 0.2);
-  --ring: rgba(209, 209, 209, 0.4);
-  --radius: 0.625rem;
-
-  /* Monaco theme variables */
-  --monaco-background: var(--color-background);
-  --monaco-foreground: var(--color-text);
-  --monaco-border: var(--border);
+body {
+	background: var(--background);
+	color: var(--foreground);
 }
 
-@plugin "@tailwindcss/aspect-ratio";
-
-@source "../src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}";
+* {
+	border-color: var(--border);
+}
diff --git a/packages/@intlayer/design-system/styles/themes.css b/packages/@intlayer/design-system/styles/themes.css
new file mode 100644
index 0000000000..d59eba0cc1
--- /dev/null
+++ b/packages/@intlayer/design-system/styles/themes.css
@@ -0,0 +1,95 @@
+@custom-variant light (:where([data-theme="light"], [data-theme="light"] *) &);
+@custom-variant dark (:where([data-theme="dark"], [data-theme="dark"] *) &);
+
+:root,
+[data-theme='light'] {
+	.shiki span {
+		color: var(--shiki-light);
+	}
+
+	color-scheme: light;
+
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+
+	--card: oklch(1 0 0);
+	--card-hover: oklch(0.97 0 0);
+
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+
+	--primary: oklch(94.3% 0.3 326);
+	--primary-foreground: oklch(0% 0 0);
+
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+
+	--hypertext: oklch(0.205 0 0);
+	--hypertext-hover: oklch(0.65 0.15 330);
+	--hypertext-active: oklch(0.205 0 0);
+
+	--success: oklch(0.72 0.19 155);
+	--warning: oklch(0.75 0.15 75);
+	--error: oklch(0.55 0.2 25);
+
+	--white: oklch(1 0 0);
+	--black: oklch(0 0 0);
+
+	--radius: 0.625rem;
+}
+
+[data-theme='dark'] {
+	.shiki span {
+		color: var(--shiki-dark);
+	}
+
+	color-scheme: dark;
+
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+
+	--card: oklch(0.205 0 0);
+	--card-hover: oklch(0.3 0 0);
+
+	--muted: oklch(0.205 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+
+	--primary: oklch(94.3% 0.051 326);
+	--primary-foreground: oklch(0% 0 0);
+
+	--secondary: oklch(0.205 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+
+	--accent: oklch(0.27 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+
+	--border: oklch(0.3 0 0);
+	--input: oklch(0.3 0 0);
+	--ring: oklch(0.556 0 0);
+
+	--hypertext: oklch(0.985 0 0);
+	--hypertext-hover: oklch(0.65 0.15 330);
+	--hypertext-active: oklch(0.985 0 0);
+
+	--success: oklch(0.72 0.19 155);
+	--warning: oklch(0.75 0.15 75);
+	--error: oklch(0.55 0.2 25);
+
+	--white: oklch(1 0 0);
+	--black: oklch(0 0 0);
+
+	--radius: 0.625rem;
+}

From 9010c9ade78149b1b332d9a67c97c2fd37419a13 Mon Sep 17 00:00:00 2001
From: aymericzip <ay.pineau@gmail.com>
Date: Tue, 1 Sep 2026 16:47:44 -0600
Subject: [PATCH 31/32] fix(app): fix hydration errors

---
 .../DashboardNavbar/OrganizationDropdown.tsx  | 23 ++++++--
 .../DashboardNavbar/ProjectDropdown.tsx       | 14 ++++-
 .../DashboardSidebar/DashboardSidebar.tsx     |  8 +--
 .../ReviewerMarketplaceBanner.tsx             | 26 ++++-----
 .../Dashboard/DashboardSkeleton.tsx           |  2 +-
 .../src/components/SwitchThemeSwitcher.tsx    |  6 ++
 apps/app/src/hooks/useDashboardRightPanel.ts  | 15 ++++-
 apps/app/src/hooks/useVisualEditorKeys.ts     | 11 +++-
 apps/app/src/router.tsx                       | 17 ++++++
 .../routes/{-$locale}/_dashboard/route.tsx    |  2 +-
 .../src/hooks/usePersistedStore.ts            | 55 ++++++-------------
 .../src/providers/ReactQueryProvider.tsx      | 13 ++++-
 .../src/providers/ThemeProvider.tsx           | 40 +++++++-------
 13 files changed, 139 insertions(+), 93 deletions(-)

diff --git a/apps/app/src/components/Dashboard/DashboardNavbar/OrganizationDropdown.tsx b/apps/app/src/components/Dashboard/DashboardNavbar/OrganizationDropdown.tsx
index 7e3d4cbf75..16d00fe337 100644
--- a/apps/app/src/components/Dashboard/DashboardNavbar/OrganizationDropdown.tsx
+++ b/apps/app/src/components/Dashboard/DashboardNavbar/OrganizationDropdown.tsx
@@ -8,6 +8,7 @@ import {
 import { Button } from '@intlayer/design-system/button';
 import { Container } from '@intlayer/design-system/container';
 import { DropDown } from '@intlayer/design-system/drop-down';
+import { useIsMounted } from '@intlayer/design-system/hooks';
 import { Modal } from '@intlayer/design-system/modal';
 import { ChevronsUpDown } from 'lucide-react';
 import { type FC, useState } from 'react';
@@ -16,6 +17,7 @@ import { OrganizationCreationForm } from '../OrganizationForm/OrganizationCreati
 
 export const OrganizationDropdown: FC = () => {
   const { session } = useSession();
+  const isMounted = useIsMounted();
   const { data: organizations } = useGetOrganizations();
   const [isCreationModalOpen, setIsCreationModalOpen] = useState(false);
   const { mutate: selectOrganization, isPending: isSelectOrganizationLoading } =
@@ -43,12 +45,21 @@ export const OrganizationDropdown: FC = () => {
     selectOrganization(organizationId);
   };
 
-  const otherOrganizations = (organizations?.data ?? [])
-    .filter(
-      (organizationEl: any) =>
-        String(organizationEl.id) !== String(organization?.id)
-    )
-    .slice(0, 10);
+  // The organizations list is client-only: the API client authenticates with
+  // `credentials: 'include'`, which is a browser mechanism, so SSR always sees
+  // an empty list and renders the empty state. Holding the list back until
+  // after mount keeps the first client render identical to the server markup —
+  // otherwise the fetch resolving around hydration swaps the empty state for
+  // buttons mid-hydration and the tree is thrown away. The panel is closed at
+  // that point, so nothing is visibly deferred.
+  const otherOrganizations = isMounted
+    ? (organizations?.data ?? [])
+        .filter(
+          (organizationEl: any) =>
+            String(organizationEl.id) !== String(organization?.id)
+        )
+        .slice(0, 10)
+    : [];
 
   return organization ? (
     <>
diff --git a/apps/app/src/components/Dashboard/DashboardNavbar/ProjectDropdown.tsx b/apps/app/src/components/Dashboard/DashboardNavbar/ProjectDropdown.tsx
index 3251c48249..caee5dc52a 100644
--- a/apps/app/src/components/Dashboard/DashboardNavbar/ProjectDropdown.tsx
+++ b/apps/app/src/components/Dashboard/DashboardNavbar/ProjectDropdown.tsx
@@ -7,6 +7,7 @@ import {
 import { Button } from '@intlayer/design-system/button';
 import { Container } from '@intlayer/design-system/container';
 import { DropDown } from '@intlayer/design-system/drop-down';
+import { useIsMounted } from '@intlayer/design-system/hooks';
 import { Modal } from '@intlayer/design-system/modal';
 import { ChevronsUpDown } from 'lucide-react';
 import { type ComponentProps, type FC, useState } from 'react';
@@ -19,6 +20,7 @@ type ProjectDropdownProps = Partial<ComponentProps<typeof DropDown.Panel>> & {
 
 export const ProjectDropdown: FC<ProjectDropdownProps> = (props) => {
   const { session } = useSession();
+  const isMounted = useIsMounted();
 
   const { data: projects } = useGetProjects();
   const { mutate: selectProject, isPending: isSelectProjectLoading } =
@@ -43,9 +45,15 @@ export const ProjectDropdown: FC<ProjectDropdownProps> = (props) => {
     selectProject(projectId);
   };
 
-  const otherProjects = (projects?.data ?? [])
-    .filter((projectEl: any) => String(projectEl.id) !== String(project?.id))
-    .slice(0, 10);
+  // Client-only list held back until after mount — see `OrganizationDropdown`
+  // for why SSR can never populate it.
+  const otherProjects = isMounted
+    ? (projects?.data ?? [])
+        .filter(
+          (projectEl: any) => String(projectEl.id) !== String(project?.id)
+        )
+        .slice(0, 10)
+    : [];
 
   return project ? (
     <>
diff --git a/apps/app/src/components/Dashboard/DashboardSidebar/DashboardSidebar.tsx b/apps/app/src/components/Dashboard/DashboardSidebar/DashboardSidebar.tsx
index b7ff460790..df5e3ccc0c 100644
--- a/apps/app/src/components/Dashboard/DashboardSidebar/DashboardSidebar.tsx
+++ b/apps/app/src/components/Dashboard/DashboardSidebar/DashboardSidebar.tsx
@@ -628,11 +628,9 @@ export const DashboardSidebar: FC<DashboardSidebarProps> = ({
           />
         </nav>
 
-        {!isCollapsed &&
-          !IS_SELF_HOSTED &&
-          process.env.NODE_ENV === 'development' && (
-            <ReviewerMarketplaceBanner />
-          )}
+        {!isCollapsed && !IS_SELF_HOSTED && import.meta.env.DEV && (
+          <ReviewerMarketplaceBanner />
+        )}
 
         {/* Environment switcher — shown when project has >1 environments */}
         {environments.length > 1 &&
diff --git a/apps/app/src/components/Dashboard/DashboardSidebar/ReviewerMarketplaceBanner.tsx b/apps/app/src/components/Dashboard/DashboardSidebar/ReviewerMarketplaceBanner.tsx
index f76ca7dc5f..0002b3f977 100644
--- a/apps/app/src/components/Dashboard/DashboardSidebar/ReviewerMarketplaceBanner.tsx
+++ b/apps/app/src/components/Dashboard/DashboardSidebar/ReviewerMarketplaceBanner.tsx
@@ -1,10 +1,9 @@
-import {} from '@intlayer/design-system/api';
 import { Button } from '@intlayer/design-system/button';
 import { Container } from '@intlayer/design-system/container';
-import { usePersistedStore } from '@intlayer/design-system/hooks';
+import { useIsMounted, usePersistedStore } from '@intlayer/design-system/hooks';
 import { App_ReviewerMarketplace_Path } from '@intlayer/design-system/routes';
 import { X } from 'lucide-react';
-import { type FC, useEffect } from 'react';
+import type { FC } from 'react';
 import { useIntlayer } from 'react-intlayer';
 import { Link } from '#components/Link/Link';
 
@@ -12,16 +11,17 @@ const STORAGE_KEY = 'isReviewerMarketplaceBannerClosed';
 
 export const ReviewerMarketplaceBanner: FC = () => {
   const { reviewerMarketplace } = useIntlayer('dashboard-sidebar');
-  const [isVisible, setIsVisible] = usePersistedStore(STORAGE_KEY, false);
+  // The key stores the dismissal, as its name says. It previously held
+  // `isVisible`, so closing the banner persisted `false`, which the mount
+  // effect then read as "not closed" and re-opened — the banner could never be
+  // dismissed for good.
+  const [isClosed, setIsClosed] = usePersistedStore(STORAGE_KEY, false);
+  const isMounted = useIsMounted();
 
-  useEffect(() => {
-    const isClosed = localStorage.getItem(STORAGE_KEY) === 'true';
-    if (!isClosed) {
-      setIsVisible(true);
-    }
-  }, []);
-
-  if (!isVisible) return <></>;
+  // Stays hidden until mount: the server cannot know about a dismissal, and
+  // rendering before `usePersistedStore` has read it back would flash a banner
+  // the user already closed.
+  if (!isMounted || isClosed) return <></>;
 
   return (
     <Container
@@ -39,7 +39,7 @@ export const ReviewerMarketplaceBanner: FC = () => {
           variant="hoverable"
           size="icon-sm"
           Icon={X}
-          onClick={() => setIsVisible(false)}
+          onClick={() => setIsClosed(true)}
         />
       </div>
       <span className="text-neutral text-sm">
diff --git a/apps/app/src/components/Dashboard/DashboardSkeleton.tsx b/apps/app/src/components/Dashboard/DashboardSkeleton.tsx
index 798c4ce9dd..9c226ca35f 100644
--- a/apps/app/src/components/Dashboard/DashboardSkeleton.tsx
+++ b/apps/app/src/components/Dashboard/DashboardSkeleton.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import { Skeleton } from '#components/Skeleton';
 
 export const DashboardSkeleton: FC = () => (
-  <div className="dashboard-theme flex h-screen max-h-screen flex-col bg-card">
+  <div className="flex h-screen max-h-screen flex-col bg-card">
     {/* Navbar Skeleton */}
     <Container
       className="sticky top-0 z-50 flex w-full flex-col gap-3 p-4"
diff --git a/apps/app/src/components/SwitchThemeSwitcher.tsx b/apps/app/src/components/SwitchThemeSwitcher.tsx
index 290804e508..e354aea270 100644
--- a/apps/app/src/components/SwitchThemeSwitcher.tsx
+++ b/apps/app/src/components/SwitchThemeSwitcher.tsx
@@ -1,3 +1,4 @@
+import { useIsMounted } from '@intlayer/design-system/hooks';
 import {
   SwitchSelector,
   type SwitchSelectorChoices,
@@ -9,6 +10,11 @@ import { useTheme } from '#/providers/ThemeProvider';
 
 export const SwitchThemeSwitcher: FC = () => {
   const { resolvedTheme, setTheme } = useTheme();
+  const isMounted = useIsMounted();
+
+  if (!isMounted) {
+    return null;
+  }
 
   const themeSwitcher = [
     {
diff --git a/apps/app/src/hooks/useDashboardRightPanel.ts b/apps/app/src/hooks/useDashboardRightPanel.ts
index eb8658a73a..0e7a2cb910 100644
--- a/apps/app/src/hooks/useDashboardRightPanel.ts
+++ b/apps/app/src/hooks/useDashboardRightPanel.ts
@@ -2,6 +2,13 @@ import { useSyncExternalStore } from 'react';
 
 type PanelState = { activePanel: string | null };
 
+/**
+ * Snapshot handed to the server render and to hydration. It has to be the same
+ * reference on every call, otherwise `useSyncExternalStore` sees a new value
+ * each render and loops.
+ */
+const SERVER_PANEL_STATE: PanelState = { activePanel: null };
+
 class PanelObservable {
   private listeners = new Set<() => void>();
   private state: PanelState = { activePanel: null };
@@ -15,6 +22,8 @@ class PanelObservable {
 
   getSnapshot = () => this.state;
 
+  getServerSnapshot = () => SERVER_PANEL_STATE;
+
   open = (id: string) => {
     const next = this.state.activePanel === id ? null : id;
     if (this.state.activePanel === next) return;
@@ -29,7 +38,9 @@ class PanelObservable {
   };
 
   private emit = () => {
-    this.listeners.forEach((l) => l());
+    this.listeners.forEach((listener) => {
+      listener();
+    });
   };
 }
 
@@ -39,7 +50,7 @@ export const useDashboardRightPanel = () => {
   const state = useSyncExternalStore(
     dashboardRightPanelManager.subscribe,
     dashboardRightPanelManager.getSnapshot,
-    () => ({ activePanel: null }) as PanelState
+    dashboardRightPanelManager.getServerSnapshot
   );
 
   return {
diff --git a/apps/app/src/hooks/useVisualEditorKeys.ts b/apps/app/src/hooks/useVisualEditorKeys.ts
index 1df65df039..4a6dee5232 100644
--- a/apps/app/src/hooks/useVisualEditorKeys.ts
+++ b/apps/app/src/hooks/useVisualEditorKeys.ts
@@ -1,5 +1,12 @@
 import { useSyncExternalStore } from 'react';
 
+/**
+ * Snapshot handed to the server render and to hydration. It has to be the same
+ * reference on every call, otherwise `useSyncExternalStore` sees a new value
+ * each render and loops.
+ */
+const SERVER_KEYS: string[] = [];
+
 class DisplayedKeysObservable {
   private listeners = new Set<() => void>();
   private state: string[] = [];
@@ -13,6 +20,8 @@ class DisplayedKeysObservable {
 
   getSnapshot = (): string[] => this.state;
 
+  getServerSnapshot = (): string[] => SERVER_KEYS;
+
   setKeys = (keys: string[]) => {
     if (
       keys.length === this.state.length &&
@@ -32,5 +41,5 @@ export const useVisualEditorKeys = (): string[] =>
   useSyncExternalStore(
     visualEditorKeysManager.subscribe,
     visualEditorKeysManager.getSnapshot,
-    () => []
+    visualEditorKeysManager.getServerSnapshot
   );
diff --git a/apps/app/src/router.tsx b/apps/app/src/router.tsx
index 5ff9e9e51d..e9edfe27e1 100644
--- a/apps/app/src/router.tsx
+++ b/apps/app/src/router.tsx
@@ -1,6 +1,7 @@
 import { Loader } from '@intlayer/design-system/loader';
 import { getQueryClient } from '@intlayer/design-system/providers';
 import { createRouter as createTanStackRouter } from '@tanstack/react-router';
+import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query';
 import { NotFoundComponent } from '#components/NotFoundComponent';
 import { routeTree } from './routeTree.gen';
 
@@ -29,6 +30,22 @@ export function getRouter() {
     defaultPendingComponent: Loader,
   });
 
+  /**
+   * Dehydrates the query cache into the SSR payload and rehydrates it before
+   * the first client render. Without it, loaders such as the root's
+   * `sessionQueryOptions` prime `['session']` on the server only, so the server
+   * markup renders session-dependent UI (organization/project dropdowns) that
+   * the first client render — reading an empty cache — omits, and hydration
+   * fails.
+   */
+  setupRouterSsrQueryIntegration({
+    router,
+    queryClient,
+    // `ReactQueryProvider` in `__root.tsx` already provides this same client,
+    // along with the toast and invalidation wiring the integration lacks.
+    wrapQueryClient: false,
+  });
+
   return router;
 }
 
diff --git a/apps/app/src/routes/{-$locale}/_dashboard/route.tsx b/apps/app/src/routes/{-$locale}/_dashboard/route.tsx
index 102cbfb91b..59bb1e0c4e 100644
--- a/apps/app/src/routes/{-$locale}/_dashboard/route.tsx
+++ b/apps/app/src/routes/{-$locale}/_dashboard/route.tsx
@@ -300,7 +300,7 @@ function DashboardLayout() {
   return (
     <AuthenticationBarrier accessRule="authenticated" locale={locale}>
       <div
-        className="dashboard-theme flex h-screen max-h-screen flex-col bg-card md:overflow-hidden"
+        className="flex h-screen max-h-screen flex-col bg-card md:overflow-hidden"
         style={{ fontSize: '75%' }}
       >
         <DashboardNavbar items={navigationItems} />
diff --git a/packages/@intlayer/design-system/src/hooks/usePersistedStore.ts b/packages/@intlayer/design-system/src/hooks/usePersistedStore.ts
index 1154ea4f83..f1ca801608 100644
--- a/packages/@intlayer/design-system/src/hooks/usePersistedStore.ts
+++ b/packages/@intlayer/design-system/src/hooks/usePersistedStore.ts
@@ -13,49 +13,28 @@ export const usePersistedStore = <S>(
   key: string,
   initialState?: S | (() => S)
 ): [S, Dispatch<SetStateAction<S>>, () => void, () => void] => {
-  const [state, setState] = useState<S>(() => {
-    // If you have an initial value on the client, send a message out immediately
-    if (initialState !== undefined) {
-      const result: S =
-        typeof initialState === 'function'
-          ? (initialState as () => S)()
-          : initialState;
-
-      if (typeof window === 'undefined') return result;
-
-      const persistedState = localStorage?.getItem(key);
-
-      if (persistedState) {
-        try {
-          return JSON.parse(persistedState);
-        } catch (e) {
-          console.error(e);
-        }
-      }
-
-      return result;
-    }
-
-    return undefined as S;
-  });
+  // The persisted value is deliberately not read here. A lazy initializer runs
+  // during render, so the previous `typeof window === 'undefined'` branch gave
+  // the server the initial state and the first client render whatever was in
+  // `localStorage` — a guaranteed hydration mismatch for anyone who had used
+  // the app before. It is loaded in the effect below instead, one render later.
+  const [state, setState] = useState<S>(() =>
+    typeof initialState === 'function'
+      ? (initialState as () => S)()
+      : (initialState as S)
+  );
 
   useEffect(() => {
     const persistedState = localStorage?.getItem(key);
 
-    if (
-      persistedState &&
-      persistedState !== 'undefined' &&
-      state === undefined
-    ) {
-      try {
-        setState(JSON.parse(persistedState));
-      } catch (e) {
-        console.error(e);
-      }
-    } else if (initialState !== undefined && state === undefined) {
-      setState(initialState);
+    if (!persistedState || persistedState === 'undefined') return;
+
+    try {
+      setState(JSON.parse(persistedState));
+    } catch (error) {
+      console.error(error);
     }
-  }, [key, state]);
+  }, [key]);
 
   /**
    * Allows setting state either directly or via a functional update.
diff --git a/packages/@intlayer/design-system/src/providers/ReactQueryProvider.tsx b/packages/@intlayer/design-system/src/providers/ReactQueryProvider.tsx
index c779af3bce..de005158a5 100644
--- a/packages/@intlayer/design-system/src/providers/ReactQueryProvider.tsx
+++ b/packages/@intlayer/design-system/src/providers/ReactQueryProvider.tsx
@@ -210,13 +210,19 @@ export const ReactQueryProvider: FC<
   if (!wiredRef.current) {
     wiredRef.current = true;
     const cache = clientRef.current.getMutationCache();
+    // Chain rather than replace: an externally created client may already carry
+    // handlers, e.g. the router SSR-query integration wraps `onError` to turn a
+    // `redirect()` thrown inside a mutation into a navigation.
+    const previousOnSuccess = cache.config.onSuccess;
+    const previousOnError = cache.config.onError;
     cache.config.onSuccess = (
       data,
       variables,
       onMutateResult,
       mutation,
       context
-    ) =>
+    ) => {
+      previousOnSuccess?.(data, variables, onMutateResult, mutation, context);
       handlersRef.current.onSuccess?.(
         data,
         variables,
@@ -224,13 +230,15 @@ export const ReactQueryProvider: FC<
         mutation,
         context
       );
+    };
     cache.config.onError = (
       error,
       variables,
       onMutateResult,
       mutation,
       context
-    ) =>
+    ) => {
+      previousOnError?.(error, variables, onMutateResult, mutation, context);
       handlersRef.current.onError?.(
         error,
         variables,
@@ -238,6 +246,7 @@ export const ReactQueryProvider: FC<
         mutation,
         context
       );
+    };
     cache.config.onSettled = (
       _data,
       _error,
diff --git a/packages/@intlayer/design-system/src/providers/ThemeProvider.tsx b/packages/@intlayer/design-system/src/providers/ThemeProvider.tsx
index 75484f26f9..c2e27a9227 100644
--- a/packages/@intlayer/design-system/src/providers/ThemeProvider.tsx
+++ b/packages/@intlayer/design-system/src/providers/ThemeProvider.tsx
@@ -29,40 +29,36 @@ const isServer = typeof window === 'undefined';
 /**
  * Inline bootstrap applying the persisted theme before the first paint.
  *
- * Serialized through `Function.prototype.toString()` and injected as an inline
- * `<script>`, so it must stay self-contained: no import, no module-scope
- * binding, no reference the bundler could rewrite into a helper call. Every
- * value it needs is passed as an argument.
+ * Held as source text rather than serialized from a real function through
+ * `Function.prototype.toString()`: that echoes whatever formatting the bundler
+ * emitted, and the SSR and browser bundles do not agree on it (tabs versus
+ * spaces), so the two renders produced different script bodies and hydration
+ * failed. A string literal is copied verbatim by every bundler.
+ *
+ * It runs before hydration, so it must stay self-contained: no import, no
+ * module-scope binding. Every value it needs is passed as an argument.
  */
-const themeScript = (
-  storageKey: string,
-  themeAttribute: string,
-  darkMediaQuery: string
-): void => {
-  let storedTheme: string | null = null;
-
+const THEME_SCRIPT_SOURCE = `(function (storageKey, themeAttribute, darkMediaQuery) {
+  var storedTheme = null;
   try {
     storedTheme = localStorage.getItem(storageKey);
-  } catch {
-    // Storage can throw (private mode, blocked cookies) — fall back to the OS.
+  } catch (error) {
+    /* Storage can throw (private mode, blocked cookies) — fall back to the OS. */
   }
-
-  const theme =
+  var theme =
     storedTheme === 'light' || storedTheme === 'dark'
       ? storedTheme
       : window.matchMedia(darkMediaQuery).matches
         ? 'dark'
         : 'light';
-
-  const element = document.documentElement;
-
+  var element = document.documentElement;
   element.setAttribute(themeAttribute, theme);
   element.style.colorScheme = theme;
-};
+})`;
 
 /** Serializes the bootstrap and its arguments into inline script source. */
 const buildBootstrap = (storageKey: string): string =>
-  `(${themeScript})(${JSON.stringify(storageKey)},${JSON.stringify(THEME_ATTRIBUTE)},${JSON.stringify(DARK_MEDIA_QUERY)})`;
+  `${THEME_SCRIPT_SOURCE}(${JSON.stringify(storageKey)},${JSON.stringify(THEME_ATTRIBUTE)},${JSON.stringify(DARK_MEDIA_QUERY)})`;
 
 /** Reads the persisted preference, discarding unknown values. */
 const getStoredTheme = (storageKey: string): Theme => {
@@ -224,7 +220,9 @@ const Theme: FC<PropsWithChildren<ThemeProviderProps>> = ({
     <ThemeContext.Provider value={value}>
       <script
         // Browsers hide the nonce value from the DOM API, so echoing it while
-        // hydrating would mismatch the server markup.
+        // hydrating would mismatch the server markup — hence the suppression.
+        // The script has already run by then; React never patches it.
+        suppressHydrationWarning
         nonce={isServer ? nonce : ''}
         // biome-ignore lint/security/noDangerouslySetInnerHtml: the bootstrap has to run before hydration, and its content is built from literals
         dangerouslySetInnerHTML={{ __html: buildBootstrap(storageKey) }}

From a70d0c63e1a94fbfc721943427eeb9e189a4c284 Mon Sep 17 00:00:00 2001
From: aymericzip <ay.pineau@gmail.com>
Date: Tue, 1 Sep 2026 16:48:03 -0600
Subject: [PATCH 32/32] style(design-system): update light card color

---
 .../@intlayer/design-system/styles/themes.css | 124 +++++++++---------
 1 file changed, 62 insertions(+), 62 deletions(-)

diff --git a/packages/@intlayer/design-system/styles/themes.css b/packages/@intlayer/design-system/styles/themes.css
index d59eba0cc1..c305c93498 100644
--- a/packages/@intlayer/design-system/styles/themes.css
+++ b/packages/@intlayer/design-system/styles/themes.css
@@ -2,94 +2,94 @@
 @custom-variant dark (:where([data-theme="dark"], [data-theme="dark"] *) &);
 
 :root,
-[data-theme='light'] {
-	.shiki span {
-		color: var(--shiki-light);
-	}
+[data-theme="light"] {
+  .shiki span {
+    color: var(--shiki-light);
+  }
 
-	color-scheme: light;
+  color-scheme: light;
 
-	--background: oklch(1 0 0);
-	--foreground: oklch(0.145 0 0);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
 
-	--card: oklch(1 0 0);
-	--card-hover: oklch(0.97 0 0);
+  --card: oklch(98% 0 271);
+  --card-hover: oklch(0.97 0 0);
 
-	--muted: oklch(0.97 0 0);
-	--muted-foreground: oklch(0.556 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
 
-	--popover: oklch(1 0 0);
-	--popover-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
 
-	--primary: oklch(94.3% 0.3 326);
-	--primary-foreground: oklch(0% 0 0);
+  --primary: oklch(94.3% 0.3 326);
+  --primary-foreground: oklch(0% 0 0);
 
-	--secondary: oklch(0.97 0 0);
-	--secondary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
 
-	--accent: oklch(0.97 0 0);
-	--accent-foreground: oklch(0.205 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
 
-	--border: oklch(0.922 0 0);
-	--input: oklch(0.922 0 0);
-	--ring: oklch(0.708 0 0);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
 
-	--hypertext: oklch(0.205 0 0);
-	--hypertext-hover: oklch(0.65 0.15 330);
-	--hypertext-active: oklch(0.205 0 0);
+  --hypertext: oklch(0.205 0 0);
+  --hypertext-hover: oklch(0.65 0.15 330);
+  --hypertext-active: oklch(0.205 0 0);
 
-	--success: oklch(0.72 0.19 155);
-	--warning: oklch(0.75 0.15 75);
-	--error: oklch(0.55 0.2 25);
+  --success: oklch(0.72 0.19 155);
+  --warning: oklch(0.75 0.15 75);
+  --error: oklch(0.55 0.2 25);
 
-	--white: oklch(1 0 0);
-	--black: oklch(0 0 0);
+  --white: oklch(1 0 0);
+  --black: oklch(0 0 0);
 
-	--radius: 0.625rem;
+  --radius: 0.625rem;
 }
 
-[data-theme='dark'] {
-	.shiki span {
-		color: var(--shiki-dark);
-	}
+[data-theme="dark"] {
+  .shiki span {
+    color: var(--shiki-dark);
+  }
 
-	color-scheme: dark;
+  color-scheme: dark;
 
-	--background: oklch(0.145 0 0);
-	--foreground: oklch(0.985 0 0);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
 
-	--card: oklch(0.205 0 0);
-	--card-hover: oklch(0.3 0 0);
+  --card: oklch(0.205 0 0);
+  --card-hover: oklch(0.3 0 0);
 
-	--muted: oklch(0.205 0 0);
-	--muted-foreground: oklch(0.708 0 0);
+  --muted: oklch(0.205 0 0);
+  --muted-foreground: oklch(0.708 0 0);
 
-	--popover: oklch(0.205 0 0);
-	--popover-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
 
-	--primary: oklch(94.3% 0.051 326);
-	--primary-foreground: oklch(0% 0 0);
+  --primary: oklch(94.3% 0.051 326);
+  --primary-foreground: oklch(0% 0 0);
 
-	--secondary: oklch(0.205 0 0);
-	--secondary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.205 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
 
-	--accent: oklch(0.27 0 0);
-	--accent-foreground: oklch(0.985 0 0);
+  --accent: oklch(0.27 0 0);
+  --accent-foreground: oklch(0.985 0 0);
 
-	--border: oklch(0.3 0 0);
-	--input: oklch(0.3 0 0);
-	--ring: oklch(0.556 0 0);
+  --border: oklch(0.3 0 0);
+  --input: oklch(0.3 0 0);
+  --ring: oklch(0.556 0 0);
 
-	--hypertext: oklch(0.985 0 0);
-	--hypertext-hover: oklch(0.65 0.15 330);
-	--hypertext-active: oklch(0.985 0 0);
+  --hypertext: oklch(0.985 0 0);
+  --hypertext-hover: oklch(0.65 0.15 330);
+  --hypertext-active: oklch(0.985 0 0);
 
-	--success: oklch(0.72 0.19 155);
-	--warning: oklch(0.75 0.15 75);
-	--error: oklch(0.55 0.2 25);
+  --success: oklch(0.72 0.19 155);
+  --warning: oklch(0.75 0.15 75);
+  --error: oklch(0.55 0.2 25);
 
-	--white: oklch(1 0 0);
-	--black: oklch(0 0 0);
+  --white: oklch(1 0 0);
+  --black: oklch(0 0 0);
 
-	--radius: 0.625rem;
+  --radius: 0.625rem;
 }