Responsive home page and use cases ui (#2468)

![Kapture 2023-09-21 at 15 51
53](https://github.com/microsoft/typespec/assets/1031227/10f2b416-ec9b-43ac-b340-d10abeb9f798)

<img width="2301" alt="image"
src="https://github.com/microsoft/typespec/assets/1031227/57aac64c-1f7a-4c93-818e-40fc1998a475">

eng/pipelines/pr-tryit.yml

@@ -2,6 +2,7 @@ trigger: none
 pr:
   - main
   - release/*
+  - feature/website-design
 
 jobs:
   - job: publish_playground

packages/website/src/components/card/card.module.css

@@ -0,0 +1,5 @@
+.card {
+  background-color: var(--colorNeutralBackground1);
+  border-radius: 22px;
+  padding: 20px;
+}

packages/website/src/components/card/card.tsx

@@ -0,0 +1,11 @@
+import { mergeClasses } from "@fluentui/react-components";
+import style from "./card.module.css";
+
+export interface CardProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export const Card = ({ children, className }: CardProps) => {
+  return <div className={mergeClasses(style["card"], className)}> {children}</div>;
+};

packages/website/src/components/description-text/secondary-text.tsx

@@ -0,0 +1,14 @@
+import { makeStyles, mergeClasses, tokens } from "@fluentui/react-components";
+
+const useFluentStyles = makeStyles({
+  descriptionText: { color: tokens.colorNeutralForeground3 },
+});
+
+export interface DescriptionTextProps {
+  children: React.ReactNode;
+  className?: string;
+}
+export const DescriptionText = ({ children, className }: DescriptionTextProps) => {
+  const fluentStyles = useFluentStyles();
+  return <div className={mergeClasses(fluentStyles.descriptionText, className)}> {children}</div>;
+};

packages/website/src/components/fluent-layout.tsx

@@ -1,6 +1,12 @@
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import { useColorMode } from "@docusaurus/theme-common";
-import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
+import {
+  FluentProvider,
+  makeStyles,
+  tokens,
+  webDarkTheme,
+  webLightTheme,
+} from "@fluentui/react-components";
 import Layout from "@theme/Layout";
 
 export const FluentLayout = ({ children }) => {
@@ -18,9 +24,18 @@ const FluentWrapper = ({ children }) => {
     <BrowserOnly>
       {() => (
         <FluentProvider theme={colorMode === "dark" ? webDarkTheme : webLightTheme}>
-          {children}
+          <FluentContainer>{children}</FluentContainer>
         </FluentProvider>
       )}
     </BrowserOnly>
   );
 };
+
+const useFluentStyles = makeStyles({
+  bg: { backgroundColor: tokens.colorNeutralBackground3 },
+});
+
+const FluentContainer = ({ children }) => {
+  const fluentStyles = useFluentStyles();
+  return <div className={fluentStyles.bg}> {children}</div>;
+};

packages/website/src/components/homepage/feature/feature.module.css

@@ -0,0 +1,52 @@
+.feature-group {
+  display: flex;
+  align-items: stretch;
+  align-self: center;
+  flex-direction: column;
+  gap: 40px;
+  padding: 80px;
+}
+
+.feature-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+}
+
+@media only screen and (min-width: 1200px) {
+  .feature-group {
+    flex-direction: row;
+    width: 1200px;
+    justify-content: space-between;
+    padding: 0;
+  }
+
+  .feature-card {
+    width: 350px;
+  }
+}
+
+@media only screen and (min-width: 600px) and (max-width: 1200px) {
+  .feature {
+    flex-direction: row;
+  }
+
+  .content {
+    align-items: baseline;
+  }
+}

packages/website/src/components/homepage/feature/feature.tsx

@@ -0,0 +1,27 @@
+import { Subtitle1, Text } from "@fluentui/react-components";
+import { Card } from "../../card/card";
+import { FluentImageName, FluentImg } from "../../fluent-img";
+import style from "./feature.module.css";
+
+export interface FeatureProps {
+  title: string;
+  image: FluentImageName;
+  children: React.ReactNode;
+}
+export const Feature = ({ title, image, children }: FeatureProps) => {
+  return (
+    <Card className={style["feature-card"]}>
+      <div className={style["feature"]}>
+        <FluentImg name={image} />
+        <div className={style["content"]}>
+          <Subtitle1>{title}</Subtitle1>
+          <Text>{children}</Text>
+        </div>
+      </div>
+    </Card>
+  );
+};
+
+export const FeatureGroup = ({ children }) => {
+  return <div className={style["feature-group"]}>{children}</div>;
+};

packages/website/src/components/homepage/homepage.module.css

@@ -38,7 +38,7 @@
 
 .intro-subtitle {
   font-size: 20px;
-  width: 420px;
+  max-width: 420px;
   text-align: center;
 }
 
@@ -52,18 +52,17 @@
   align-self: stretch;
 }
 
+@media only screen and (max-width: 728px) {
+  .intro-demo {
+    display: none;
+  }
+}
+
 .intro-demo-image {
   width: 800px;
   height: 534px;
 }
 
-.sections {
-  display: flex;
-  padding: 100px 0px 0 0px;
-  flex-direction: column;
-  gap: 128px;
-}
-
 .overview {
   display: flex;
   flex-direction: column;
@@ -79,31 +78,10 @@
 }
 
 .overview-description {
-  width: 620px;
+  max-width: 620px;
   text-align: center;
 }
 
-.overview-points {
-  display: flex;
-  padding: 0px 120px;
-  justify-content: space-between;
-  align-items: center;
-  align-self: stretch;
-  gap: 88px;
-}
-
-.feature {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 24px;
-}
-
-.feature > img {
-  width: 128px;
-  height: 128px;
-}
-
 :global(html[data-theme="dark"]) .closing {
   background-image: url(/img/bg-bottom-dark.svg);
 }
@@ -120,5 +98,4 @@
   gap: 16px;
   flex: 1 0 0;
   margin: auto;
-  width: 1280px;
 }

packages/website/src/components/homepage/homepage.tsx

@@ -1,15 +1,8 @@
 import useBaseUrl from "@docusaurus/useBaseUrl";
-import {
-  Button,
-  Card,
-  Subtitle1,
-  Text,
-  Title1,
-  Title2,
-  makeStyles,
-  tokens,
-} from "@fluentui/react-components";
-import { FluentImageName, FluentImg } from "../fluent-img";
+import { Button, Text, Title1, Title2, makeStyles, tokens } from "@fluentui/react-components";
+import { Card } from "../card/card";
+import { SectionedLayout } from "../sectioned-layout/sectioned-layout";
+import { Feature, FeatureGroup } from "./feature/feature";
 import style from "./homepage.module.css";
 import { Section } from "./section/section";
 
@@ -19,19 +12,17 @@ const useFluentStyles = makeStyles({
 });
 
 export const HomeContent = () => {
-  const fluentStyles = useFluentStyles();
-
   return (
-    <div className={fluentStyles.bg}>
+    <>
       <Intro />
-      <div className={style["sections"]}>
+      <SectionedLayout>
         <Overview />
         <OpenAPISection />
         <EcoSystemSection />
         <FlexibilitySection />
-        <Closing />
-      </div>
-    </div>
+      </SectionedLayout>
+      <Closing />
+    </>
   );
 };
 
@@ -77,7 +68,7 @@ const Overview = () => {
             generate standards-compliant API schemas in seconds.
           </Text>
         </div>
-        <div className={style["overview-points"]}>
+        <FeatureGroup>
           <Feature title="Describe complex APIs, fast" image="editor">
             Reduce the time it takes to describe complex API shapes by using a minimal language
             that's easy for developers to use and love.
@@ -90,29 +81,12 @@ const Overview = () => {
             With a single line of code, generate a multitude of API assets in your preferred format
             or protocol - even all at the same time.
           </Feature>
-        </div>
+        </FeatureGroup>
       </div>
     </>
   );
 };
 
-interface FeatureProps {
-  title: string;
-  image: FluentImageName;
-  children: React.ReactNode;
-}
-const Feature = ({ title, image, children }: FeatureProps) => {
-  return (
-    <Card size="large">
-      <div className={style["feature"]}>
-        <FluentImg name={image} />
-        <Subtitle1>{title}</Subtitle1>
-        <Text>{children}</Text>
-      </div>
-    </Card>
-  );
-};
-
 const OpenAPISection = () => {
   return (
     <Section

packages/website/src/components/homepage/section/section.module.css

@@ -1,9 +1,25 @@
 .section {
   display: flex;
-  justify-content: space-between;
+  gap: 170px;
   align-items: center;
   align-content: center;
-  padding-left: 80px;
+  flex-direction: column;
+}
+
+@media only screen and (min-width: 1200px) {
+  .text-left {
+    flex-direction: row;
+  }
+
+  .text-right {
+    flex-direction: row-reverse;
+  }
+}
+
+.info-container {
+  width: 50vw;
+  display: flex;
+  justify-content: center;
 }
 
 .info {
@@ -38,8 +54,15 @@
 }
 
 .illustration {
-  width: 710px;
-  height: 600px;
+  width: 80vw;
+  height: 70vw;
+}
+
+@media only screen and (min-width: 1200px) {
+  .illustration {
+    width: 50vw;
+    height: 40vw;
+  }
 }
 
 .item-card {
@@ -50,3 +73,10 @@
   height: 52px;
   max-width: 52px;
 }
+
+.item-content {
+  display: flex;
+  margin-top: 5px;
+  flex-direction: column;
+  gap: 5px;
+}