Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Website about us profile update #237

Merged
merged 3 commits into from
Jul 4, 2024
Merged

Website about us profile update #237

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c34f04
added team profile
tulsiojha Jun 28, 2024
83bd57d
added profile for team
tulsiojha Jun 28, 2024
6aebeb3
added profile images, text related changes
tulsiojha Jun 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 18 additions & 4 deletions src/apps/devdoc/app/components/join-provider-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,11 @@ const JoinProvidersDialog = ({
{oathProviders?.githubLoginUrl && (
<Button
variant="tertiary"
content="Continue with Github"
content={
<span className="!wb-bodyLg">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Avoid using important flag in class names

Using the important flag in class names can lead to specificity issues and make the CSS harder to maintain. Consider refactoring the styles to avoid using it.

Continue with Github
</span>
}
prefix={<GithubLogoFill />}
linkComponent={Link}
toLabel="href"
Expand All @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
31 changes: 18 additions & 13 deletions src/apps/devdoc/app/components/website/about/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (complexity): Consider creating a separate ImageWithOverlay component for the image and overlay logic.

The new code introduces increased complexity due to additional nesting and inline styles. Hardcoding styles directly in the JSX makes the code less maintainable and reduces reusability. To improve readability and maintainability, consider creating a separate ImageWithOverlay component for the image and overlay logic. This approach will make the main component cleaner and more modular. Here's a refactored version:

import { GraphExtended, GraphItem } from '../../graph';
import SectionWrapper from '../section-wrapper';
import aboutUsBanner from '~/images/about-us/about-us-banner-1.jpg';

// Create a reusable component for the image with overlay
const ImageWithOverlay = ({ src, alt, overlayColor }) => (
  <div className="wb-relative wb-h-full wb-w-full">
    <img src={src} alt={alt} className="wb-h-full wb-w-full wb-object-cover" />
    <div className="wb-absolute wb-inset-0" style={{ backgroundColor: overlayColor }} />
  </div>
);

const AboutMain = () => {
  return (
    <SectionWrapper className="wb-flex wb-flex-col wb-w-full">
      <div className="wb-flex wb-flex-col wb-gap-3xl wb-text-center">
        <h1 className="wb-heading3xl-marketing md:wb-heading4xl-marketing lg:wb-heading5xl-marketing wb-text-text-default">
          About us
        </h1>
      </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">
            <ImageWithOverlay src={aboutUsBanner.src} alt="About Us Banner" overlayColor="#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">
                We make development a breeze, saving developers' time with our ultra-efficient platform
              </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-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>
        </div>
      </GraphExtended>
    </SectionWrapper>
  );
};

export default AboutMain;

This refactor improves readability, reusability, and maintainability.

src={aboutUsBanner.src}
className="wb-h-full wb-w-full wb-object-cover"
/>
<div className="wb-absolute wb-inset-0 wb-bg-[#0000008c]" />
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider using a CSS variable for the background color

Using a CSS variable for the background color would make it easier to maintain and update the color scheme across the application.

Suggested change
<div className="wb-absolute wb-inset-0 wb-bg-[#0000008c]" />
:root {
--overlay-bg-color: #0000008c;
}
<div className="wb-absolute wb-inset-0 wb-bg-[var(--overlay-bg-color)]" />

</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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/apps/devdoc/app/components/website/about/mission.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
87 changes: 60 additions & 27 deletions src/apps/devdoc/app/components/website/about/team.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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,
)}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Check for undefined imageClassName

Ensure that t.imageClassName is always defined or provide a default value to avoid potential runtime errors.

/>
)}
</div>
Expand All @@ -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__"
/>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Incorrect target attribute value

The value for the target attribute should be "_blank" instead of "blank" to open the link in a new tab.

)}
{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>
Expand Down
2 changes: 1 addition & 1 deletion src/apps/devdoc/app/components/website/about/vision.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
3 changes: 0 additions & 3 deletions src/apps/devdoc/app/components/website/home/messages.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ const MessageCard = ({
subtitle={<span className="wb-bodyMd">{subtitle}</span>}
color="one"
size="md"
noImage
tabIndex={-1}
/>
</span>
Expand All @@ -39,7 +38,6 @@ const MessageCard = ({
color="dark"
size="md"
tabIndex={-1}
noImage
/>
</span>
</div>
Expand All @@ -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}>
Expand Down
12 changes: 6 additions & 6 deletions src/apps/devdoc/app/components/website/horizontal-top-tab-home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
})}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions src/apps/devdoc/app/utils/config.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export default {
showExtra: false,
items: [
{
title: 'Documentation',
title: 'Docs',
to: '/docs',
},
{
Expand Down Expand Up @@ -212,7 +212,7 @@ export default {
to: '/blog',
},
{
title: 'Documentation',
title: 'Docs',
type: 'normal',
to: '/docs',
},
Expand Down
Loading
Loading