Merge pull request #237 from kloudlite/tooltip

Website about us profile update

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

@@ -1,10 +1,20 @@
-import consts from '~/app/utils/const';
+import consts, {
+  githubPrefix,
+  linkedInPrefix,
+  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 (
@@ -26,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>
@@ -40,30 +53,50 @@ by a dedicated and visionary leadership focused on pushing the boundaries of inn
                     </span>
                   </div>
                   <div className="wb-flex wb-flex-row wb-items-center wb-gap-lg">
-                    <IconButton
-                      icon={<LinkedinLogo />}
-                      variant="plain"
-                      linkComponent={Link}
-                      toLabel="href"
-                      to={t.linkedin}
-                      size="xs"
-                    />
-                    <IconButton
-                      icon={<TwitterNewLogo />}
-                      variant="plain"
-                      linkComponent={Link}
-                      toLabel="href"
-                      to={t.x}
-                      size="xs"
-                    />
-                    <IconButton
-                      icon={<GithubLogo />}
-                      variant="plain"
-                      linkComponent={Link}
-                      toLabel="href"
-                      to={t.github}
-                      size="xs"
-                    />
+                    {t.linkedin && (
+                      <IconButton
+                        icon={<LinkedinLogo />}
+                        variant="plain"
+                        linkComponent={Link}
+                        toLabel="href"
+                        to={linkedInPrefix + t.linkedin}
+                        size="xs"
+                        target="__blank__"
+                      />
+                    )}
+                    {t.x && (
+                      <IconButton
+                        icon={<TwitterNewLogo />}
+                        variant="plain"
+                        linkComponent={Link}
+                        toLabel="href"
+                        to={twitterPrefix + t.x}
+                        size="xs"
+                        target="__blank__"
+                      />
+                    )}
+                    {t.github && (
+                      <IconButton
+                        icon={<GithubLogo />}
+                        variant="plain"
+                        linkComponent={Link}
+                        toLabel="href"
+                        to={githubPrefix + t.github}
+                        size="xs"
+                        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',
       },