Skip to content

Commit

Permalink
fix(website): Fast-follow with homepage improvements (#3794)
Browse files Browse the repository at this point in the history 
* chore: update figma link

* fix: remove hero circle background element

* fix: delete unused components

* fix: animate line items later

* fix: re-arrange carousel item order

* fix: add more gap

* fix: ref forwarding bug

* fix: automatically loop through examples

* fix: code editor rounded edges

* fix: animate logos on hover

* chore: component showcase small fixes

* fix: shifting when toggling disclosure

* chore: remove log spam

* fix: implement accordion

* fix: text overflow

* fix: round bottom border

* fix: tiny fixes homehero

* chore: try rebuilding

* fix: flickering background

* fix: animating fadein better

* chore: remove unused variable

* fix: animate cloud

* fix: template section alignment

* fix: offset second row of icons

* fix: text alignment in section and maxWidth

* fix: footer design

* fix: prevent autofocusing combobox on mount

* fix: section max width

* fix: footer bg color

* fix: import order

* fix: remove cheesy animation

---------

Co-authored-by: “nora <nkrantz@twilio.com>
  • Loading branch information
@TheSisb @nkrantz
TheSisb and nkrantz committed Mar 1, 2024
1 parent 4fd2d3b commit 72027af
Show file tree
Hide file tree
Showing 23 changed files with 521 additions and 672 deletions.
2 changes: 2 additions & 0 deletions packages/paste-website/package.json
View file
Expand Up @@ -151,6 +151,8 @@
"deepmerge": "4.2.2",
"dogapi": "^2.8.4",
"dotenv": "^16.0.0",
"embla-carousel-autoplay": "^8.0.0",
"embla-carousel-react": "^8.0.0",
"github-slugger": "^2.0.0",
"globby-esm": "npm:globby@^13.1.3",
"gpt3-tokenizer": "^1.1.5",
Expand Down
94 changes: 52 additions & 42 deletions packages/paste-website/src/components/color-swatch/ColorGradient.tsx
View file
Expand Up @@ -48,25 +48,50 @@ const StyledGradientSwatch = styled.div<{ backgroundColor: string }>`
height: ${themeGet("space.space60")};
`;

const StyledGradientSwatchTall = styled.div<{ backgroundColor: string }>`
background-color: ${(props: any) => props.backgroundColor};
height: ${themeGet("space.space120")};
`;

export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: string; makeTall?: boolean }>> = ({
aliasPrefix,
makeTall = "false",
}) => {
const StyledGradientSwatchTall = styled.div<{ backgroundColor: string; rounded: boolean }>((props) => {
return {
backgroundColor: props.backgroundColor,
// @ts-expect-error this works fine
height: props.theme.space.space120,
// @ts-expect-error this works fine
borderBottomLeftRadius: props.rounded ? props.theme.radii.borderRadius20 : 0,
// @ts-expect-error this works fine
borderBottomRightRadius: props.rounded ? props.theme.radii.borderRadius20 : 0,
};
});

export const ColorGradient: React.FC<
React.PropsWithChildren<{ aliasPrefix: string; makeTall?: boolean; index?: number }>
> = ({ aliasPrefix, makeTall = "false", index = 0 }) => {
const [show, setShow] = React.useState(false);
const { theme } = useDarkModeContext();
const aliasValues = getAliasValuesFromPrefix(aliasPrefix, theme);
const count = aliasValues.length - 1;

function handleVisibilityChange(isVisible: boolean): void {
if (!show) {
setTimeout(() => {
setShow(isVisible);
}, index * 50);
}
}

const styles = useSpring({
opacity: show ? 1 : 0.1,
config: {
duration: 500,
},
});

if (makeTall) {
return (
<Box borderRadius="borderRadius20" overflow="hidden">
{aliasValues.map((aliasValue) => (
<StyledGradientSwatchTall backgroundColor={aliasValue} key={useUID()} />
))}
</Box>
<VisibilitySensor onChange={handleVisibilityChange} partialVisibility offset={{ bottom: 100 }}>
<AnimatedBox borderRadius="borderRadius20" overflow="hidden" style={styles}>
{aliasValues.map((aliasValue, _index) => (
<StyledGradientSwatchTall backgroundColor={aliasValue} key={useUID()} rounded={_index === count} />
))}
</AnimatedBox>
</VisibilitySensor>
);
}
return (
Expand All @@ -79,36 +104,21 @@ export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: stri
};

export const ColorGradientRainbow: React.FC<{ omitGrays?: boolean }> = ({ omitGrays = false }): JSX.Element => {
const [show, setShow] = React.useState(false);

function handleVisibilityChange(isVisible: boolean): void {
if (!show) {
setShow(isVisible);
}
}

const styles = useSpring({
opacity: show ? 1 : 0.1,
});

if (omitGrays)
return (
<VisibilitySensor onChange={handleVisibilityChange} partialVisibility offset={{ bottom: 150 }}>
<AnimatedBox
display="grid"
columnGap="space40"
marginBottom="space70"
gridTemplateColumns="repeat(6, 1fr)"
gridTemplateRows="max-content"
style={styles}
>
{aliasPrefixes
.filter((prefix) => prefix !== "palette-gray")
.map((prefix) => (
<ColorGradient makeTall aliasPrefix={prefix} key={useUID()} />
))}
</AnimatedBox>
</VisibilitySensor>
<Box
display="grid"
columnGap="space40"
marginBottom="space70"
gridTemplateColumns="repeat(6, 1fr)"
gridTemplateRows="max-content"
>
{aliasPrefixes
.filter((prefix) => prefix !== "palette-gray")
.map((prefix, index) => (
<ColorGradient makeTall aliasPrefix={prefix} key={useUID()} index={index} />
))}
</Box>
);
return (
<Box display="grid" columnGap="space40" marginBottom="space70" gridTemplateColumns="repeat(7, 1fr)">
Expand Down
86 changes: 44 additions & 42 deletions packages/paste-website/src/components/homepage/Accessibility.tsx
View file
Expand Up @@ -53,48 +53,50 @@ const Accessibility: React.FC = (): React.ReactElement => {
<BouncyAnchor text="Learn more in our Inclusive Design Guide" href="/inclusive-design" />
</Box>
</Box>
<Tabs selectedId={selectedTabId} baseId="horizontal-tabs-example" variant="fitted">
<TabList aria-label="Horizontal product tabs">
<Tab id={selectedTabId}>Focus management</Tab>
<Tab>Screen reader support</Tab>
<Tab>Keyboard support</Tab>
</TabList>
<TabPanels>
<TabPanel>
<AspectRatio ratio="16:9">
<iframe
title="Remix silent demo video"
src="https://www.loom.com/embed/4c584f749e414326b83fed3321132186?sid=42b642cb-3377-4a76-b926-fe0f9f274df7"
frameBorder="0"
allowFullScreen
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
/>
</AspectRatio>
</TabPanel>
<TabPanel>
<AspectRatio ratio="16:9">
<iframe
title="Remix silent demo video"
src="https://www.loom.com/embed/5328cf9bec074512917180df829250e9?sid=a0a3a1a1-e521-4a86-8ccc-02b45344d97d"
frameBorder="0"
allowFullScreen
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
/>
</AspectRatio>
</TabPanel>
<TabPanel>
<AspectRatio ratio="16:9">
<iframe
title="Remix silent demo video"
src="https://www.loom.com/embed/7a98f9ded7b24371bd6888fa80f52b19?sid=e9b9fd19-4bbd-4692-aa67-6e8ec72eb617"
frameBorder="0"
allowFullScreen
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
/>
</AspectRatio>
</TabPanel>
</TabPanels>
</Tabs>
<Box flexShrink={0} minWidth="570px">
<Tabs selectedId={selectedTabId} baseId="horizontal-tabs-example" variant="fitted">
<TabList aria-label="Horizontal product tabs">
<Tab id={selectedTabId}>Focus management</Tab>
<Tab>Screen reader support</Tab>
<Tab>Keyboard support</Tab>
</TabList>
<TabPanels>
<TabPanel>
<AspectRatio ratio="16:9">
<iframe
title="Remix silent demo video"
src="https://www.loom.com/embed/4c584f749e414326b83fed3321132186?sid=42b642cb-3377-4a76-b926-fe0f9f274df7"
frameBorder="0"
allowFullScreen
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
/>
</AspectRatio>
</TabPanel>
<TabPanel>
<AspectRatio ratio="16:9">
<iframe
title="Remix silent demo video"
src="https://www.loom.com/embed/5328cf9bec074512917180df829250e9?sid=a0a3a1a1-e521-4a86-8ccc-02b45344d97d"
frameBorder="0"
allowFullScreen
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
/>
</AspectRatio>
</TabPanel>
<TabPanel>
<AspectRatio ratio="16:9">
<iframe
title="Remix silent demo video"
src="https://www.loom.com/embed/7a98f9ded7b24371bd6888fa80f52b19?sid=e9b9fd19-4bbd-4692-aa67-6e8ec72eb617"
frameBorder="0"
allowFullScreen
style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
/>
</AspectRatio>
</TabPanel>
</TabPanels>
</Tabs>
</Box>
</Box>
</Box>

Expand Down
3 changes: 1 addition & 2 deletions packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx
View file
Expand Up @@ -60,8 +60,7 @@ const CommunityOfBuilders: React.FC = (): React.ReactElement => {
<StatBox stat="30" description="Monthly Github Discussions" />
</Box>
</Box>

<Box width="size20" height="size10" position="absolute" bottom={-50} right={250}>
<Box width="size20" height="size10" position="absolute" bottom={-50} right={[50, 75, 250]}>
<Image src={DesignTool} aria-hidden="true" role="img" alt="token colors illustration" />
</Box>
</Box>
Expand Down
18 changes: 11 additions & 7 deletions packages/paste-website/src/components/homepage/DesignEfficiency.tsx
View file
Expand Up @@ -48,10 +48,7 @@ const DesignEfficiency: React.FC = (): React.ReactElement => {
efficient design and engineering collaboration.
</Text>
<Box fontWeight="fontWeightSemibold" fontSize="fontSize40" lineHeight="lineHeight40">
<BouncyAnchor
text="Find us on Figma Community"
href="https://www.figma.com/community/file/1207476064127503112/twilio-paste-components"
/>
<BouncyAnchor text="Find us on Figma Community" href="https://www.figma.com/@twilio" />
</Box>
<Box
marginTop="space170"
Expand All @@ -65,9 +62,16 @@ const DesignEfficiency: React.FC = (): React.ReactElement => {
top={300}
position="absolute"
>
{someIcons.map((Icon) => (
<Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />
))}
{someIcons.map((Icon, index) => {
if (index >= 22 && index < 44) {
return (
<Box marginLeft="spaceNegative180">
<Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />
</Box>
);
}
return <Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />;
})}
</Box>
</Box>
<Box
Expand Down
21 changes: 17 additions & 4 deletions packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx
View file
Expand Up @@ -35,6 +35,7 @@ const ForTwilioCustomers: React.FC = (): React.ReactElement => {
textAlign="left"
zIndex="zIndex10"
marginY={["space0", "space0", "space0", "space200"]}
maxWidth={["100%", "100%", "100%", "size60"]}
>
<Text
as="h3"
Expand All @@ -46,17 +47,29 @@ const ForTwilioCustomers: React.FC = (): React.ReactElement => {
>
For Twilions and Twilio customers alike
</Text>
<Text as="p" color="colorTextInverse" marginBottom="space70">
<Text as="p" fontSize="fontSize40" lineHeight="lineHeight40" color="colorTextInverse" marginBottom="space70">
Rapidly build enterprise-grade, inclusive, and extensible experiences that look and feel like your brand.
Paste works great with Flex plugins, CodeExchange apps, and more.
</Text>
<Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
<Box color="colorTextInverse" fontSize="fontSize40" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
<BouncyAnchor href="/introduction/for-engineers/quickstart" text="Eng quick start" inverse />
</Box>
<Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
<Box
color="colorTextInverse"
fontSize="fontSize40"
fontWeight="fontWeightSemibold"
lineHeight="lineHeight40"
marginTop="space20"
>
<BouncyAnchor href="/customization" text="Customization overview" inverse />
</Box>
<Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
<Box
color="colorTextInverse"
fontSize="fontSize40"
fontWeight="fontWeightSemibold"
lineHeight="lineHeight40"
marginTop="space20"
>
<BouncyAnchor
href="https://www.figma.com/community/file/1207476064127503112/twilio-paste-components"
text="Figma Community file"
Expand Down
10 changes: 0 additions & 10 deletions packages/paste-website/src/components/homepage/HomeHero.tsx
View file
@@ -1,16 +1,13 @@
import { Box } from "@twilio-paste/box";
import { DisplayHeading } from "@twilio-paste/display-heading";
import { Text } from "@twilio-paste/text";
import { useTheme } from "@twilio-paste/theme";

import CircleIcon from "../icons/CircleIcon";
import { BouncyAnchor } from "./BouncyAnchor";
import { SearchBox } from "./SearchBox";
import { SectionContainer } from "./SectionContainer";
import { ComponentShowcase } from "./component-showcase";

const HomeHero = (): JSX.Element => {
const theme = useTheme();
return (
<SectionContainer marginY="space0">
<Box element="HOME_HERO" display="flex" columnGap="space100">
Expand Down Expand Up @@ -59,13 +56,6 @@ const HomeHero = (): JSX.Element => {
<ComponentShowcase />
</Box>
</Box>
<Box zIndex="zIndex0" position="absolute" top="45rem" left="42%" element="CIRCLE">
<CircleIcon
css={{ height: theme.heights.size30, width: theme.widths.size30 }}
color={theme.backgroundColors.colorBackgroundBrandHighlight}
decorative
/>
</Box>
</SectionContainer>
);
};
Expand Down

0 comments on commit 72027af

Please sign in to comment.