From e76e2e69791536673aa0f6863acd50614838e191 Mon Sep 17 00:00:00 2001
From: mario-guerra <marioguerra@microsoft.com>
Date: Mon, 17 Mar 2025 13:28:54 -0500
Subject: [PATCH] mini website refresh

---
 website/src/components/Video.astro            | 29 ++++++++
 website/src/components/footer/footer.astro    | 23 ++++--
 website/src/components/header/header.astro    |  1 +
 .../homepage/hero-illustration.astro          |  3 +-
 website/src/components/homepage/hero.astro    | 35 ++++++----
 .../src/components/release-notification.astro | 13 ----
 website/src/components/video-data.ts          | 38 ++++++++++
 website/src/pages/blog/index.astro            |  3 +
 website/src/pages/community.astro             | 37 ++++++++++
 website/src/pages/community.md                | 23 ------
 website/src/pages/index.astro                 | 12 +++-
 website/src/pages/videos.astro                | 70 +++++++++++++++++++
 12 files changed, 232 insertions(+), 55 deletions(-)
 create mode 100644 website/src/components/Video.astro
 create mode 100644 website/src/components/video-data.ts
 create mode 100644 website/src/pages/community.astro
 delete mode 100644 website/src/pages/community.md
 create mode 100644 website/src/pages/videos.astro

diff --git a/website/src/components/Video.astro b/website/src/components/Video.astro
new file mode 100644
index 00000000000..4377ac20f6f
--- /dev/null
+++ b/website/src/components/Video.astro
@@ -0,0 +1,29 @@
+---
+const { url } = Astro.props;
+---
+
+<div class="video-container">
+  <iframe
+    width="100%"
+    height="100%"
+    src={url}
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    referrerpolicy="strict-origin-when-cross-origin"
+    allowfullscreen></iframe>
+</div>
+<style>
+  .video-container {
+    position: relative;
+    width: 100%;
+    padding-top: 56.25%; /* 16:9 Aspect Ratio */
+  }
+  .video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+</style>
diff --git a/website/src/components/footer/footer.astro b/website/src/components/footer/footer.astro
index 1e76bfa06f7..9b33823dd2c 100644
--- a/website/src/components/footer/footer.astro
+++ b/website/src/components/footer/footer.astro
@@ -1,5 +1,6 @@
 ---
 import { Links } from "@site/src/constants";
+import { Icon } from "@astrojs/starlight/components";
 import ThemePicker from "@typespec/astro-utils/components/theme-picker.astro";
 import Link from "@typespec/astro-utils/components/link.astro";
 import MicrosoftLogo from "./microsoft-logo.astro";
@@ -100,6 +101,14 @@ const { class: className } = Astro.props;
     background-color: var(--colorBrandForeground1);
     border-radius: 50%;
   }
+
+  .icon {
+    color: var(--colorNeutralForeground1); /* Set icon color to black */
+  }
+
+  .icon:hover {
+    color: var(--colorNeutralForeground2); /* Set icon hover color to white */
+  }
 </style>
 <footer class:list={["footer", className]} data-theme="dark">
   <div class="top">
@@ -107,12 +116,18 @@ const { class: className } = Astro.props;
       <div class="main-title">TypeSpec</div>
       <div class="main-description">Follow us for latest updates, contributions, and more.</div>
       <div>
-        <a
+        <Link
+          class="item icon link"
           href="https://github.com/microsoft/typespec"
           target="_blank"
-          rel="noopener noreferrer"
-          class="header-github-link"
-          aria-label="Github repository"></a>
+          rel="noopener noreferrer"><Icon name="github" label="github" /></Link
+        >
+        <Link
+          class="item icon link"
+          href="https://aka.ms/typespec/discord"
+          target="_blank"
+          rel="noopener noreferrer"><Icon name="discord" label="discord" /></Link
+        >
       </div>
     </div>
     <div class="top-separator"></div>
diff --git a/website/src/components/header/header.astro b/website/src/components/header/header.astro
index 7db58477496..6b53cc9a352 100644
--- a/website/src/components/header/header.astro
+++ b/website/src/components/header/header.astro
@@ -195,6 +195,7 @@ const { noDrawer } = Astro.props;
         </ul>
       </details>
       <Link class="item link" href="/docs">Docs</Link>
+      <Link class="item link" href="/videos">Videos</Link>
       <Link class="item link" href="/playground">Playground</Link>
       <Link class="item link" href="/blog">Blog</Link>
       <Link class="item link" href="/community">Community</Link>
diff --git a/website/src/components/homepage/hero-illustration.astro b/website/src/components/homepage/hero-illustration.astro
index 7035554dce8..7b5f915d81a 100644
--- a/website/src/components/homepage/hero-illustration.astro
+++ b/website/src/components/homepage/hero-illustration.astro
@@ -14,7 +14,7 @@ import clsx from "clsx";
   /* Patch starlight tabs to look like fluent design */
   .hero-illustration > :global(starlight-tabs) {
     display: flex;
-    flex-direction: column-reverse;
+    flex-direction: column; /* Ensure tabs are above the content */
 
     .tablist-wrapper {
       align-self: center;
@@ -59,6 +59,7 @@ import clsx from "clsx";
     font-size: 90%;
   }
 </style>
+
 <div class="hero-illustration">
   <Tabs>
     <TabItem label="Http">
diff --git a/website/src/components/homepage/hero.astro b/website/src/components/homepage/hero.astro
index 0f7662c6dec..8c0af1d96f8 100644
--- a/website/src/components/homepage/hero.astro
+++ b/website/src/components/homepage/hero.astro
@@ -10,7 +10,6 @@ import HeroIllustration from "./hero-illustration.astro";
     background-repeat: no-repeat;
     width: 100%;
     background-size: 100vw 94%;
-
     display: flex;
     padding: 120px 80px 52px 80px;
     flex-direction: column;
@@ -60,10 +59,10 @@ import HeroIllustration from "./hero-illustration.astro";
 
   .hero-title {
     text-align: center;
-    font-size: 24px;
+    font-size: 48px;
     font-style: normal;
-    font-weight: 600;
-    line-height: 100%; /* 24px */
+    font-weight: 800;
+    line-height: 100%;
     letter-spacing: -0.24px;
   }
 
@@ -72,10 +71,9 @@ import HeroIllustration from "./hero-illustration.astro";
     font-size: 96px;
     font-style: normal;
     font-weight: 600;
-    line-height: 100%; /* 96px */
+    line-height: 1.5;
     letter-spacing: -1px;
     color: transparent;
-
     background: linear-gradient(
       127deg,
       #6dc2b1 -17.91%,
@@ -89,12 +87,14 @@ import HeroIllustration from "./hero-illustration.astro";
   @media only screen and (max-width: 1024px) {
     .hero-subtitle {
       font-size: 68px;
+      line-height: 1.5;
     }
   }
 
   @media only screen and (max-width: 728px) {
     .hero-subtitle {
       font-size: 48px;
+      line-height: 1.5;
     }
   }
 
@@ -130,6 +130,7 @@ import HeroIllustration from "./hero-illustration.astro";
     gap: 10px;
     flex: 1 0 0;
     align-self: stretch;
+    height: 100vh; /* Ensure full visibility on 1080p monitor */
   }
 
   @media only screen and (max-width: 728px) {
@@ -142,15 +143,25 @@ import HeroIllustration from "./hero-illustration.astro";
 <div class="hero-container">
   <div class="hero-content">
     <h1 class="hero-title">TypeSpec</h1>
-    <div class="hero-subtitle">Describe APIs</div>
+    <div class="hero-buttons">
+      <Button as="a" appearance="primary" href={Links.docs} title="Install TypeSpec">
+        Install
+      </Button>
+      <Button
+        as="a"
+        appearance="outline"
+        class="highlight"
+        href={Links.playground}
+        title="Try the Playground"
+      >
+        Playground
+      </Button>
+    </div>
+    <div class="hero-subtitle">Design APIs</div>
     <DescriptionText size="large" className="hero-description">
-      Describe your data up front and generate schemas, API specifications, client / server code,
+      Design your data up front and generate schemas, API specifications, client / server code,
       docs, and more.
     </DescriptionText>
-    <div class="hero-buttons">
-      <Button as="a" appearance="primary" href={Links.docs}> Get Started </Button>
-      <Button as="a" appearance="outline" href={Links.playground}> Try it out </Button>
-    </div>
   </div>
   <div class="hero-demo">
     <HeroIllustration />
diff --git a/website/src/components/release-notification.astro b/website/src/components/release-notification.astro
index f0ad15b4201..54e312cd976 100644
--- a/website/src/components/release-notification.astro
+++ b/website/src/components/release-notification.astro
@@ -29,19 +29,6 @@ if (!last.data.version) {
 import Link from "@typespec/astro-utils/components/link.astro";
 ---
 
-<script>
-  document.addEventListener("DOMContentLoaded", () => {
-    const els = document.querySelectorAll(".new-version-banner") as any as HTMLElement[];
-    const today = new Date();
-    els.forEach((el) => {
-      const releaseDate = new Date(el.dataset.releasedate!);
-      if (today.getTime() - releaseDate.getTime() > 7 * 86400000 /* 7 days */) {
-        els.forEach((x) => x.classList.add("hide"));
-      }
-    });
-  });
-</script>
-
 <style>
   .new-version-banner {
     border: 1px solid var(--colorBrandBackground);
diff --git a/website/src/components/video-data.ts b/website/src/components/video-data.ts
new file mode 100644
index 00000000000..d786061afc0
--- /dev/null
+++ b/website/src/components/video-data.ts
@@ -0,0 +1,38 @@
+export const videoData = [
+  {
+    url: "https://www.youtube.com/embed/yfCYrKaojDo",
+    featured: true,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/y0LOXYklsMg",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/F8a6qOpMpcM",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/3Q6xWbWTSaU",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/EINevYeNosc",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/xDbC7Mhi9wM",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  {
+    url: "https://www.youtube.com/embed/cuYWVKa79IQ",
+    featured: false,
+    thumbnail: "https://via.placeholder.com/300x200",
+  },
+  // Add more videos here
+];
diff --git a/website/src/pages/blog/index.astro b/website/src/pages/blog/index.astro
index 59a3f81a270..55689a1ba5c 100644
--- a/website/src/pages/blog/index.astro
+++ b/website/src/pages/blog/index.astro
@@ -4,6 +4,9 @@ import BaseLayout from "@site/src/layouts/base-layout.astro";
 import BlogPostPreview from "./_BlogPostPreview.astro";
 
 const posts = await getCollection("blog");
+
+// Sort posts by date in descending order
+posts.sort((a, b) => b.data.publishDate.getTime() - a.data.publishDate.getTime());
 ---
 
 <style>
diff --git a/website/src/pages/community.astro b/website/src/pages/community.astro
new file mode 100644
index 00000000000..b6791f824b1
--- /dev/null
+++ b/website/src/pages/community.astro
@@ -0,0 +1,37 @@
+---
+import BaseLayout from "../layouts/base-layout.astro";
+---
+
+<BaseLayout>
+  <div class="community" style="padding: 20px; margin: 0 auto; max-width: 800px;">
+    <h1 style="color: #4A90E2;">Welcome</h1>
+    <p>Welcome to the TypeSpec community! We're glad you're here.</p>
+
+    <h2 style="color: #4A90E2;">GitHub</h2>
+    <p>
+      We love stars so make sure you <a href="https://github.com/microsoft/typespec"
+        >star us on GitHub</a
+      >.
+    </p>
+
+    <h2 style="color: #4A90E2;">Contributing</h2>
+    <p>
+      Check out our <a href="https://github.com/microsoft/typespec/blob/main/CONTRIBUTING.md"
+        >contributing guide</a
+      > if you would like to contribute to TypeSpec.
+    </p>
+
+    <h2 style="color: #4A90E2;">Community Discord</h2>
+    <p>
+      Join our community <a href="https://aka.ms/typespec/discord">Discord Server</a> to connect with
+      other developers using TypeSpec.
+    </p>
+
+    <h2 style="color: #4A90E2;">Discussion</h2>
+    <p>
+      Ask questions on <a href="https://github.com/microsoft/typespec/discussions"
+        >Github Discussion</a
+      >.
+    </p>
+  </div>
+</BaseLayout>
diff --git a/website/src/pages/community.md b/website/src/pages/community.md
deleted file mode 100644
index 94c4c5a670d..00000000000
--- a/website/src/pages/community.md
+++ /dev/null
@@ -1,23 +0,0 @@
----
-layout: ../layouts/content.astro
----
-
-# Welcome
-
-Welcome to the TypeSpec community! We're glad you're here.
-
-## GitHub
-
-We love stars so make sure you [star us on GitHub](https://github.com/microsoft/typespec).
-
-## Contributing
-
-Check out our [contributing guide](https://github.com/microsoft/typespec/blob/main/CONTRIBUTING.md) if you would like to contribute to TypeSpec.
-
-## Community Discord
-
-Join our community [Discord Server](https://aka.ms/typespec/discord) to connect with other developers using TypeSpec.
-
-## Discussion
-
-Ask questions on [Github Discussion](https://github.com/microsoft/typespec/discussions)
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index b4866cdbe90..3b4a8568a9f 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -7,7 +7,7 @@ import OverviewIllustration from "../components/homepage/overview-illustration.a
 import { Links } from "../constants";
 import Section from "../components/section.astro";
 import FeatureList from "../components/feature-list.astro";
-import { link } from "@typespec/astro-utils/utils/link";
+import { link } from "../utils/index";
 import ExtensibilityIllustration from "../components/homepage/extensibility-illustration.astro";
 import LightDarkImg from "../components/light-dark-img.astro";
 import OpenAPI3HeroIllustration from "@site/src/components/homepage/openapi3-hero-illustration.astro";
@@ -53,6 +53,14 @@ import Button from "../components/button.astro";
     align-self: stretch;
   }
 
+  .overview-summary .primary-text {
+    font-size: 2em; /* Make the text 2x larger */
+  }
+
+  .overview-description {
+    text-align: center; /* Center the paragraph */
+  }
+
   .closing {
     display: flex;
     padding: 80px 60px;
@@ -88,7 +96,7 @@ import Button from "../components/button.astro";
   <SectionedLayout>
     <div class="overview">
       <div class="overview-summary">
-        <PrimaryText>Why TypeSpec</PrimaryText>
+        <PrimaryText className="primary-text">Why TypeSpec</PrimaryText>
         <div class="overview-subtitle">API-First for developers</div>
         <DescriptionText size="large" className="overview-description">
           With TypeSpec, remove the handwritten files that slow you down, and generate
diff --git a/website/src/pages/videos.astro b/website/src/pages/videos.astro
new file mode 100644
index 00000000000..6fcf4d8ce5b
--- /dev/null
+++ b/website/src/pages/videos.astro
@@ -0,0 +1,70 @@
+---
+import Video from "@site/src/components/Video.astro";
+import { videoData } from "@site/src/components/video-data.ts";
+import BaseLayout from "@site/src/layouts/base-layout.astro";
+
+const featuredVideo = videoData.find((video) => video.featured);
+const otherVideos = videoData.filter((video) => !video.featured);
+---
+
+<BaseLayout>
+  <div class="content">
+    <section class="intro">
+      <p>Learn more about TypeSpec and how it can help you design and build APIs at scale.</p>
+    </section>
+    <section class="list">
+      <div class="featured-video">
+        {
+          featuredVideo && (
+            <section>
+              <h2>Featured Video</h2>
+              <Video url={featuredVideo.url} />
+            </section>
+          )
+        }
+      </div>
+      <div class="video-grid">
+        {
+          otherVideos.map((video) => (
+            <div class="video-box">
+              <Video url={video.url} />
+            </div>
+          ))
+        }
+      </div>
+    </section>
+  </div>
+</BaseLayout>
+
+<style>
+  .content {
+    background-color: var(--colorNeutralBackground3);
+    min-height: 100%;
+    padding: 20px;
+    box-sizing: border-box;
+  }
+  .intro {
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 1.2em;
+  }
+  .list {
+    max-width: 90%;
+    margin: auto;
+  }
+  .featured-video {
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .video-grid {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(300px, 1fr));
+    gap: 16px;
+    padding: 10px;
+  }
+  .video-box {
+    padding: 10px; /* Reduced padding for spacing */
+    margin: 10px; /* Consistent margin */
+    /* Remove fixed height */
+  }
+</style>