diff --git a/website/src/components/Feature.js b/website/src/components/Feature.js index 02a3f7db..8da74f04 100644 --- a/website/src/components/Feature.js +++ b/website/src/components/Feature.js @@ -1,22 +1,50 @@ -import React from 'react'; -import clsx from 'clsx'; - +import React from "react"; +import clsx from "clsx"; +import styles from "./styles.module.css"; +import { + Card, + shorthands, + makeStyles, + Link, + CardFooter, + CardHeader, +} from "@fluentui/react-components"; +const useStyles = makeStyles({ + card: { + ...shorthands.margin("auto"), + width: "326px", + height: "272px", + maxWidth: "100%", + maxHeight: "100%", + }, +}); /** * Component to render each Feature in HomepageFeatures list */ -export default function Feature({Svg, title, description, link}) { - return ( -
- -
- {title} -
- -
-

{title}

-

{description}

-
+export default function Feature({ Svg, title, description, link, content }) { + const style = useStyles(); + return ( + + + } + /> +
+
{title}
+
{description}
- ); - } \ No newline at end of file + + + {content} âž” + + + + ); +} diff --git a/website/src/components/HomepageFeatures.js b/website/src/components/HomepageFeatures.js index 7602bcc5..c24956a6 100644 --- a/website/src/components/HomepageFeatures.js +++ b/website/src/components/HomepageFeatures.js @@ -12,34 +12,36 @@ import Feature from '@site/src/components/Feature'; */ const FeatureList = [ { - title: 'Discover Templates', - Svg: 'img/home-discover.svg', - link: "/", - description: ( - <> - Explore the azd-templates topic on GitHub or check out the Gallery to find templates using richer filters and search capability. - - ), + title: "Discover Templates", + Svg: "img/home-discover.png", + link: "https://azure.github.io/awesome-azd/", + description: + "View our gallery of community-contributed and Microsoft-authored templates.", + content: "View templates", }, { - title: 'Create Your Own', - Svg: 'img/home-create.svg', + title: "Learn more about azd", + Svg: "img/home-learn.png", + link: "https://aka.ms/azd", + description: + "Read our documentation for more information about azd and its features.", + content: "View docs", + }, + { + title: "Create your own template", + Svg: "img/home-create.png", link: "https://learn.microsoft.com/azure/developer/azure-developer-cli/make-azd-compatible?pivots=azd-create", - description: ( - <> - Have an existing project that you want to migrate, to use azd templates? Convert a sample or create a new template! - - ), + description: + "Learn how to build a template with step-by-step instructions.", + content: "Try learn module", }, { - title: 'Contribute To Gallery', - Svg: 'img/home-contribute.svg', - link: "https://github.com/Azure/awesome-azd/issues/new/choose", - description: ( - <> - Consider sharing your template in our Gallery to help the community. Just fill in the issue and we'll do the rest! - - ), + title: "Contribute to the Gallery", + Svg: "img/home-contribute.png", + link: "https://azure.github.io/awesome-azd/docs/intro", + description: + "After making your azd template, consider adding it to our gallery to share with fellow azd-developers.", + content: "View contributor guide", }, ]; @@ -50,14 +52,12 @@ const FeatureList = [ */ export default function HomepageFeatures() { return ( -
-
-
+
+
{FeatureList.map((props, idx) => ( ))}
-
-
+
); } diff --git a/website/src/components/styles.module.css b/website/src/components/styles.module.css index b248eb2e..4fd0c904 100644 --- a/website/src/components/styles.module.css +++ b/website/src/components/styles.module.css @@ -1,11 +1,39 @@ .features { + padding: 2rem; +} + +.row { display: flex; + justify-content: center; align-items: center; - padding: 2rem 0; - width: 100%; + flex-flow: row; + gap: 24px; +} + +.title { + font-size: 20px; + font-weight: 600; +} + +.description { + font-size: 14px; + font-weight: 400; +} + +.cardContent { + display: flex; + row-gap: 10px; + flex-flow: column; +} + +.link { + font-size: 16px; + font-weight: 400; + --colorBrandForegroundLink: #7160e8; } -.featureSvg { - height: 200px; - width: 200px; +@media screen and (max-width: 996px) { + .row { + flex-flow: column; + } } diff --git a/website/src/pages/about/index.js b/website/src/pages/about/index.js index f1b7d2fe..cbeb07e9 100644 --- a/website/src/pages/about/index.js +++ b/website/src/pages/about/index.js @@ -1,28 +1,40 @@ -import React from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; - -import styles from './index.module.css'; +import React from "react"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Layout from "@theme/Layout"; +import HomepageFeatures from "@site/src/components/HomepageFeatures"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import { FluentProvider, Text, teamsLightTheme } from "@fluentui/react-components"; +import styles from "./index.module.css"; function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); return ( -
-
-

{siteConfig.title}

- - -

{siteConfig.tagline}

-
- - Request a Template đź“« - +
+ { + currentTarget.style.display = "none"; + }} + alt="" + /> +
+
+
+ Accelerate your journey to the cloud with azd +
+
+ Azure Developer CLI (azd) is an open-source tool that accelerates + your application’s journey from local development to Azure +
+
+
+
@@ -30,15 +42,16 @@ function HomepageHeader() { } export default function Home() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( + description="Description will go into a meta tag in " + > -
+ -
+ ); } diff --git a/website/src/pages/about/index.module.css b/website/src/pages/about/index.module.css index 07a221ab..b80b5923 100644 --- a/website/src/pages/about/index.module.css +++ b/website/src/pages/about/index.module.css @@ -4,17 +4,65 @@ */ .heroBanner { - padding: 4rem 0; - text-align: center; - position: relative; + padding: 2rem; + display: inline-block; overflow: hidden; - background-color: #245e94; - color:#245e94; + position: relative; + width: 100%; + background-color: white; +} + +.cover { + pointer-events: none; + position: absolute; + height: calc(100% - 4rem); + width: calc(100% - 4rem); + border-radius: 20px; +} + +.video { + width: 38rem; + height: 21rem; +} + +.section { + position: relative; + display: flex; + justify-content: center; + align-items: center; + padding: 4rem; + gap: 2rem; +} + +.description { + max-width: 34rem; + flex: 1; + display: flex; + justify-content: center; + align-items: start; + flex-flow: column; +} + +.description .title { + font-size: 40px; + font-weight: 500; +} + +.description .content { + font-size: 24px; + font-weight: 500; +} + +[data-theme="dark"] .heroBanner { + background-color: black; } @media screen and (max-width: 996px) { - .heroBanner { - padding: 2rem; + .section { + flex-direction: column; + } + .video { + width: 100%; } } diff --git a/website/src/pages/styles.module.css b/website/src/pages/styles.module.css index 55fc2bc0..4060f010 100644 --- a/website/src/pages/styles.module.css +++ b/website/src/pages/styles.module.css @@ -108,7 +108,7 @@ margin: 0px 25px; } -@media screen and (max-width: 960px) { +@media screen and (max-width: 996px) { .filterAndCard { flex-direction: column; } diff --git a/website/static/img/home-contribute.png b/website/static/img/home-contribute.png new file mode 100644 index 00000000..b4719248 Binary files /dev/null and b/website/static/img/home-contribute.png differ diff --git a/website/static/img/home-create.png b/website/static/img/home-create.png new file mode 100644 index 00000000..36a81c02 Binary files /dev/null and b/website/static/img/home-create.png differ diff --git a/website/static/img/home-discover.png b/website/static/img/home-discover.png new file mode 100644 index 00000000..1a85b5eb Binary files /dev/null and b/website/static/img/home-discover.png differ diff --git a/website/static/img/home-discover.svg b/website/static/img/home-discover.svg deleted file mode 100644 index 1921df55..00000000 --- a/website/static/img/home-discover.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/website/static/img/home-learn.png b/website/static/img/home-learn.png new file mode 100644 index 00000000..a207b350 Binary files /dev/null and b/website/static/img/home-learn.png differ diff --git a/website/static/img/home-screen.png b/website/static/img/home-screen.png deleted file mode 100644 index 9f3829a8..00000000 Binary files a/website/static/img/home-screen.png and /dev/null differ diff --git a/website/static/templates.json b/website/static/templates.json index 6908e89c..0c0f9339 100644 --- a/website/static/templates.json +++ b/website/static/templates.json @@ -1113,5 +1113,22 @@ "msft", "new" ] + }, + { + "title": "Next.js 13 on Container Apps", + "description": "A blueprint for getting a Next.js 13 app running on Azure Container Apps with CDN and Application Insights.", + "preview": "./templates/images/nextjs-aca.png", + "website": "https://github.com/CMeeg", + "author": "Chris Meagher", + "source": "https://github.com/CMeeg/nextjs-aca", + "tags": [ + "typescript", + "reactjs", + "nodejs", + "bicep", + "aca", + "azurecdn", + "appinsights" + ] } ] diff --git a/website/static/templates/images/nextjs-aca.png b/website/static/templates/images/nextjs-aca.png new file mode 100644 index 00000000..c894e390 Binary files /dev/null and b/website/static/templates/images/nextjs-aca.png differ