added profile images, text related changes

src/apps/devdoc/app/components/join-provider-dialog.tsx

@@ -109,7 +109,11 @@ const JoinProvidersDialog = ({
                     {oathProviders?.githubLoginUrl && (
                       <Button
                         variant="tertiary"
-                        content="Continue with Github"
+                        content={
+                          <span className="!wb-bodyLg">
+                            Continue with Github
+                          </span>
+                        }
                         prefix={<GithubLogoFill />}
                         linkComponent={Link}
                         toLabel="href"
@@ -121,7 +125,11 @@ const JoinProvidersDialog = ({
                     {oathProviders?.gitlabLoginUrl && (
                       <Button
                         variant="purple"
-                        content="Continue with Gitlab"
+                        content={
+                          <span className="!wb-bodyLg">
+                            Continue with Gitlab
+                          </span>
+                        }
                         prefix={<GitlabLogoFill />}
                         linkComponent={Link}
                         toLabel="href"
@@ -133,7 +141,11 @@ const JoinProvidersDialog = ({
                     {oathProviders?.googleLoginUrl && (
                       <Button
                         variant="primary"
-                        content="Continue with Google"
+                        content={
+                          <span className="!wb-bodyLg">
+                            Continue with Google
+                          </span>
+                        }
                         prefix={<GoogleLogoFill />}
                         linkComponent={Link}
                         toLabel="href"
@@ -150,7 +162,9 @@ const JoinProvidersDialog = ({
                   ) : null}
                   <Button
                     variant="basic"
-                    content="Continue with email"
+                    content={
+                      <span className="!wb-bodyLg">Continue with email</span>
+                    }
                     prefix={<Envelope />}
                     linkComponent={Link}
                     toLabel="href"

src/apps/devdoc/app/components/website/about/main.tsx

@@ -1,5 +1,6 @@
 import { GraphExtended, GraphItem } from '../../graph';
 import SectionWrapper from '../section-wrapper';
+import aboutUsBanner from '~/images/about-us/about-us-banner-1.jpg';
 
 const AboutMain = () => {
   return (
@@ -11,7 +12,13 @@ const AboutMain = () => {
       </div>
       <GraphExtended>
         <div className="wb-grid wb-grid-cols-1 wb-grid-rows-[352px_auto] md:wb-grid-cols-none wb-gap-3xl md:wb-gap-5xl">
-          <GraphItem className="wb-bg-surface-basic-subdued"> </GraphItem>
+          <GraphItem className="wb-bg-surface-basic-subdued wb-relative">
+            <img
+              src={aboutUsBanner.src}
+              className="wb-h-full wb-w-full wb-object-cover"
+            />
+            <div className="wb-absolute wb-inset-0 wb-bg-[#0000008c]" />
+          </GraphItem>
           <div className="wb-grid wb-grid-cols-1 md:wb-grid-cols-[448px_auto] wb-gap-3xl md:wb-gap-5xl xl:wb-h-[544px] 2xl:wb-h-[480px] 3xl:wb-h-[320px]">
             <GraphItem className="wb-bg-surface-basic-subdued wb-p-5xl">
               <span className="wb-text-text-default wb-headingXl-marketing md:wb-heading2xl-marketing lg:wb-heading3xl-marketing">
@@ -20,18 +27,16 @@ const AboutMain = () => {
               </span>
             </GraphItem>
             <GraphItem className="wb-bg-surface-basic-subdued wb-p-5xl">
-              <span className="wb-bodyLg md:wb-bodyXl lg:wb-bodyXXl wb-text-text-soft">
-                <span className="wb-text-text-default">
-                  At Kloudlite, we understand the challenges developers face
-                  because we've experienced them ourselves. We know how precious
-                  your time is, so we created a platform to streamline and
-                  simplify the development process. Our mission is to provide
-                  you with the tools for a seamless, productive experience. With
-                  Kloudlite, you can easily integrate any Kubernetes cluster,
-                  whether on the cloud or locally. We're here to make
-                  development smoother, faster, and more enjoyable. Join us and
-                  let’s build something amazing together.
-                </span>
+              <span className="wb-bodyLg md:wb-bodyXl lg:wb-bodyXXl wb-text-text-strong">
+                At Kloudlite, we understand the challenges developers face
+                because we've experienced them ourselves. We know how precious
+                your time is, so we created a platform to streamline and
+                simplify the development process. Our mission is to provide you
+                with the tools for a seamless, productive experience. With
+                Kloudlite, you can easily integrate any Kubernetes cluster,
+                whether on the cloud or locally. We're here to make development
+                smoother, faster, and more enjoyable. Join us and let’s build
+                something amazing together.
               </span>
             </GraphItem>
           </div>

src/apps/devdoc/app/components/website/about/mission.tsx

@@ -23,7 +23,7 @@ const AboutMission = () => {
             </div>
           </GraphItem>
           <GraphItem className="wb-bg-surface-basic-subdued wb-p-5xl wb-flex wb-flex-col wb-justify-center">
-            <span className="wb-bodyLg md:wb-bodyXl lg:wb-bodyXXl wb-text-text-soft">
+            <span className="wb-bodyLg md:wb-bodyXl lg:wb-bodyXXl wb-text-text-strong">
               To deliver a seamless development experience that mirrors
               production environments. We are committed to building a strong,
               engaged community of developers, ensuring our platform is

src/apps/devdoc/app/components/website/about/team.tsx

@@ -4,11 +4,17 @@ import consts, {
   twitterPrefix,
 } from '~/app/utils/const';
 import { IconButton } from 'kl-design-system/atoms/button';
-import { GithubLogo, LinkedinLogo, TwitterNewLogo } from '@jengaicons/react';
+import {
+  GithubLogo,
+  Globe,
+  LinkedinLogo,
+  TwitterNewLogo,
+} from '@jengaicons/react';
 import Link from 'next/link';
 import { Block } from '../../commons';
 import { GraphItem } from '../../graph';
 import SectionWrapper from '../section-wrapper';
+import { cn } from '~/app/utils/commons';
 
 const AboutTeam = () => {
   return (
@@ -30,7 +36,10 @@ by a dedicated and visionary leadership focused on pushing the boundaries of inn
                     <img
                       src={t.image}
                       alt={t.name}
-                      className="wb-h-full wb-w-full wb-object-cover"
+                      className={cn(
+                        'wb-h-full wb-w-full wb-object-cover',
+                        t.imageClassName,
+                      )}
                     />
                   )}
                 </div>
@@ -77,6 +86,17 @@ by a dedicated and visionary leadership focused on pushing the boundaries of inn
                         target="__blank__"
                       />
                     )}
+                    {t.web && (
+                      <IconButton
+                        icon={<Globe />}
+                        variant="plain"
+                        linkComponent={Link}
+                        toLabel="href"
+                        to={t.web}
+                        size="xs"
+                        target="__blank__"
+                      />
+                    )}
                   </div>
                 </div>
               </div>

src/apps/devdoc/app/components/website/about/vision.tsx

@@ -23,7 +23,7 @@ const AboutVision = () => {
             </div>
           </GraphItem>
           <GraphItem className="wb-bg-surface-basic-subdued wb-p-5xl wb-flex wb-flex-col wb-justify-center">
-            <span className="wb-bodyLg md:wb-bodyXl lg:wb-bodyXXl wb-text-text-soft">
+            <span className="wb-bodyLg md:wb-bodyXl lg:wb-bodyXXl wb-text-text-strong">
               To empower developers worldwide by providing the ultimate platform
               for building, testing, and deploying distributed applications with
               unparalleled efficiency and ease, fostering a vibrant community

src/apps/devdoc/app/components/website/home/messages.tsx

@@ -27,7 +27,6 @@ const MessageCard = ({
             subtitle={<span className="wb-bodyMd">{subtitle}</span>}
             color="one"
             size="md"
-            noImage
             tabIndex={-1}
           />
         </span>
@@ -39,7 +38,6 @@ const MessageCard = ({
             color="dark"
             size="md"
             tabIndex={-1}
-            noImage
           />
         </span>
       </div>
@@ -59,7 +57,6 @@ const DontBelieve = () => {
           ))}
         </Slider>
       </div>
-
       <div className="wb-h-full wb-hidden md:wb-grid wb-grid-cols-1 md:wb-grid-cols-3 wb-gap-3xl lg:wb-gap-5xl">
         {consts.homeNew.messages.map((message) => (
           <GraphItem key={message.title}>

src/apps/devdoc/app/components/website/horizontal-top-tab-home.tsx

@@ -31,23 +31,23 @@ const HorizontalTopTabItem = ({
         active
           ? 'wb-bg-surface-basic-default md:wb-bg-surface-primary-subdued'
           : 'wb-bg-surface-basic-default',
-        className
+        className,
       )}
       onClick={onClick}
     >
       <h3
         className={cn(
-          'wb-heading2xl-marketing wb-transition-all lg:wb-min-h-[84px] xl:wb-min-h-[auto] 3xl:wb-min-h-[auto] wb-shrink-0',
+          'wb-headingXl-marketing md:wb-heading2xl-marketing wb-transition-all lg:wb-min-h-[84px] xl:wb-min-h-[auto] 3xl:wb-min-h-[auto] wb-shrink-0',
           {
             'wb-text-text-primary': active,
             'wb-text-text-default': !active,
-          }
+          },
         )}
       >
         {label}
       </h3>
       <p
-        className={cn('wb-bodyXl wb-transition-all', {
+        className={cn('wb-bodyLg md:wb-bodyXl wb-transition-all', {
           'wb-text-text-strong': !active,
           'wb-text-text-default': active,
         })}
@@ -75,7 +75,7 @@ interface IHorizontalTopTab {
   activeTab: string;
   tabs: Omit<IHorizontalTopTabItem, 'active' | 'onClick'>[];
   onTabChange: (
-    item: Omit<IHorizontalTopTabItem, 'active' | 'onClick'>
+    item: Omit<IHorizontalTopTabItem, 'active' | 'onClick'>,
   ) => void;
   tabContainerClassName?: string;
   tabContentClassName?: string;
@@ -151,7 +151,7 @@ const HorizontalTopTab = ({
           <div
             className={cn(
               'wb-bg-surface-basic-subdued md:wb-h-[338px] xl:wb-h-[480px] xl:wb-max-h-[480px] wb-w-full',
-              tabContentClassName
+              tabContentClassName,
             )}
           >
             {tab}

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

@@ -129,7 +129,7 @@ export default {
         showExtra: false,
         items: [
           {
-            title: 'Documentation',
+            title: 'Docs',
             to: '/docs',
           },
           {
@@ -212,7 +212,7 @@ export default {
         to: '/blog',
       },
       {
-        title: 'Documentation',
+        title: 'Docs',
         type: 'normal',
         to: '/docs',
       },

src/apps/devdoc/app/utils/const.tsx

@@ -120,7 +120,7 @@ const consts = {
         subtitle: 'Co-founder, Anscer Robotics',
         company: <TwitterNewLogoFill size={24} />,
         message:
-          'Thanks to Kloudlite, AnsCer Robotics streamlined deployment across edge devices, minimized downtime, and enhanced monitoring with Grafana integration. Remote config management simplified operations, boosting efficiency significantly. Kloudlite has been invaluable in optimizing our workflow.',
+          'Thanks to Kloudlite, Anscer Robotics streamlined deployment across edge devices, minimized downtime, and enhanced monitoring with Grafana integration. Remote config management simplified operations, boosting efficiency significantly. Kloudlite has been invaluable in optimizing our workflow.',
       },
       {
         title: 'Sunny Khanna',
@@ -138,20 +138,18 @@ const consts = {
       },
     ],
     exploring: [
-      {
-        img: RemoteLocal.src,
-        label: 'Remote local environments',
-        desc: 'Discover how Kloudlite pioneers transformative remote local environments.',
-        to: '/blog/remote-local-environments',
-      },
-
       {
         img: Collarative.src,
         label: 'Collaborative development',
         desc: 'In a globalized landscape, collaborative development faces challenges but fuels innovation.',
         to: '/blog/collaborative-development',
       },
-
+      {
+        img: RemoteLocal.src,
+        label: 'Remote local environments',
+        desc: 'Discover how Kloudlite pioneers transformative remote local environments.',
+        to: '/blog/remote-local-environments',
+      },
       {
         img: Workflow.src,
         label: 'Development workflow',
@@ -551,6 +549,7 @@ const consts = {
         linkedin: '',
         x: '',
         github: '',
+        web: '',
       },
       {
         name: 'Piyush Kumar',
@@ -578,8 +577,9 @@ const consts = {
       },
       {
         name: 'Harsh Malviya',
-        role: 'Design Intern',
+        role: 'Jr product designer',
         image: profileHarsh.src,
+        imageClassName: '!wb-object-contain',
         linkedin: '',
         x: '',
         github: '',