update website changes

src/apps/devdoc/package.json

@@ -48,6 +48,7 @@
     "next-themes": "^0.2.1",
     "nextra": "^2.13.2",
     "nextra-theme-docs": "^2.13.2",
+    "postcss": "^8.4.47",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.4",
@@ -86,7 +87,6 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "next-sitemap": "^4.2.3",
-    "postcss": "12.1.5",
     "prettier": "^2.8.8",
     "tailwindcss": "^3.4.0",
     "typescript": "5.2.2"

src/apps/devdoc/web/components/page/index-new.tsx

@@ -1,9 +1,7 @@
-import { Badge } from 'kl-design-system/atoms/badge';
-import { GraphExtended } from '~/app/components/graph';
-import hero from '~/images/homeNew/hero';
-import HomeIllustrationMobileDark from '~/images/homeNew/illustration-mobile-dark.svg';
-import HomeIllustrationMobileWeb from '~/images/homeNew/illustration-mobile.webp';
 import DynamicImage from '~/app/components/dynamic-image';
+import { GraphExtended } from '~/app/components/graph';
+import JoinProvidersDialog from '~/app/components/join-provider-dialog';
+import FaqSection from '~/app/components/website/home/faq';
 import HowItWorksSection from '~/app/components/website/home/how-it-works';
 import KeepExploring from '~/app/components/website/home/keep-exploring';
 import KloudliteDevelopment from '~/app/components/website/home/kloudlite-development';
@@ -13,20 +11,14 @@ import PartnerSection from '~/app/components/website/home/partners';
 import SecureAtCore from '~/app/components/website/home/secure-at-core';
 import SuperCharge from '~/app/components/website/home/supercharge';
 import Wrapper from '~/app/components/wrapper';
-import JoinProvidersDialog from '~/app/components/join-provider-dialog';
-import FaqSection from '~/app/components/website/home/faq';
-import Events from '../website/home/events';
+import hero from '~/images/homeNew/hero';
+import HomeIllustrationMobileDark from '~/images/homeNew/illustration-mobile-dark.svg';
+import HomeIllustrationMobileWeb from '~/images/homeNew/illustration-mobile.webp';
 
 const Title = () => {
   return (
     <div className="wb-flex wb-flex-col wb-gap-3xl wb-text-center wb-items-center">
-      <div>
-        <Badge type="info">
-          <span className="wb-bodyMd md:wb-bodyLg">
-            Open-Source (Apache 2.0)
-          </span>
-        </Badge>
-      </div>
+      {' '}
       <h1 className="wb-heading4xl-marketing md:wb-heading6xl-marketing lg:wb-heading7xl-marketing wb-text-text-default wb-text-center lg:wb-w-[896px] xl:wb-w-[1024px] 2xl:wb-w-[1060px]">
         <div className="wb-hidden md:wb-block">
           Building distributed applications

src/apps/devdoc/web/utils/config.tsx

@@ -1,17 +1,17 @@
-import Link from 'next/link';
+import { DiscordLogo, YoutubeLogoFill } from '@jengaicons/react';
 import { BrandLogo } from 'kl-design-system/branding/brand-logo';
+import Link from 'next/link';
 import {
   GithubLogoFill,
   LinkedinLogoFill,
   TwitterNewLogoFill,
 } from '~/app/icons/icons';
-import OssIcon from '~/images/homeNew/oss.svg';
 import OssIconDark from '~/images/homeNew/oss-dark.svg';
+import OssIcon from '~/images/homeNew/oss.svg';
+import ThemeSwitcher from '../components/theme-switcher';
 import { cn } from './commons';
 import { IConfig } from './use-config';
-import ThemeSwitcher from '../components/theme-switcher';
 import { useTheme } from './useTheme';
-import { YoutubeLogoFill } from '@jengaicons/react';
 
 export const siteDesc =
   'Kloudlite is a remote-local development environment platform designed to streamline the workflow for developers working on distributed applications. By integrating both local and remote environments through Kubernetes, Kloudlite ensures a seamless, productive, and more connected development experience.';
@@ -25,6 +25,7 @@ export const communityUrl =
 export const changeLogUrl = 'https://github.com/kloudlite/kloudlite/releases';
 const linkedinUrl = 'https://linkedin.com/company/kloudlite-io';
 const youtubeUrl = 'https://youtube.com/@kloudliteofficial';
+const discordUrl = 'https://discord.gg/4Y7VHccg';
 const xUrl = 'https://x.com/kloudlite';
 export const supportEmail = '[email protected]';
 const socialIconSize = 18;
@@ -38,6 +39,9 @@ const SocialMenu = () => {
       <a target="_blank" href={xUrl} aria-label="kloudlite-x">
         <TwitterNewLogoFill size={socialIconSize} />
       </a>
+      <a target="_blank" href={discordUrl} aria-label="kloudlite-discord">
+        <DiscordLogo size={socialIconSize} />
+      </a>
       <a target="_blank" href={linkedinUrl} aria-label="kloudlite-linkedin">
         <LinkedinLogoFill size={socialIconSize} />
       </a>
@@ -57,7 +61,7 @@ const BrandMenu = ({ className }: { className?: string }) => {
     <div
       className={cn(
         'wb-flex wb-flex-col wb-gap-7xl md:wb-gap-3xl lg:wb-pr-4xl wb-order-last md:wb-order-first md:wb-justify-between md:wb-h-full',
-        className,
+        className
       )}
     >
       <div className="wb-flex wb-flex-row">