Preview for 9.0 docs assets

apps/frontpage/components/community/brand.tsx

@@ -5,42 +5,35 @@ import { Section } from './section';
 export const BrandAndResources: FC = () => {
   return (
     <Section className="relative mb-8 md:mb-16" id="brand-resources">
-      <h2 className="font-bold text-2xl mb-2">
+      <h2 className="mb-2 text-2xl font-bold">
         Use brand & presentation resources
       </h2>
       <p className="mb-8">
         The easiest way to get involved is to share Storybook with fellow
         developers, colleagues, and friends.
       </p>
-      <div className="flex flex-col md:flex-row gap-8 mb-8">
-        <div className="flex-1 border border-zinc-300 dark:border-slate-700 rounded p-6 md:p-8 flex gap-4 md:gap-6">
-          <StorybookIcon className="w-10 h-10 text-[#ff4785]" />
+      <div className="mb-8 flex flex-col gap-8 md:flex-row">
+        <div className="flex flex-1 gap-4 rounded border border-zinc-300 p-6 md:gap-6 md:p-8 dark:border-slate-700">
+          <StorybookIcon className="h-10 w-10 text-[#ff4785]" />
           <div className="flex-1">
-            <h2 className="font-bold text-lg">Logo and brand</h2>
+            <h2 className="text-lg font-bold">Logo and brand</h2>
             <p className="mb-3 text-zinc-500 dark:text-slate-400">
               Use the Storybook logo, typography, colors, and images.
             </p>
             <div className="flex items-center gap-4">
               <a
-                className="flex gap-2 items-center text-blue-500"
+                className="flex items-center gap-2 text-blue-500"
                 href="https://github.com/storybookjs/brand"
               >
                 Get logo
                 <ChevronSmallRightIcon />
               </a>
-              <a
-                className="flex gap-2 items-center text-blue-500"
-                href="https://github.com/storybookjs/design-system"
-              >
-                View design system
-                <ChevronSmallRightIcon />
-              </a>
             </div>
           </div>
         </div>
-        <div className="flex-1 border border-zinc-300 dark:border-slate-700 rounded p-6 md:p-8 flex gap-4 md:gap-6">
+        <div className="flex flex-1 gap-4 rounded border border-zinc-300 p-6 md:gap-6 md:p-8 dark:border-slate-700">
           <svg
-            className="w-10 h-10"
+            className="h-10 w-10"
             role="img"
             viewBox="0 0 48 48"
             xmlns="http://www.w3.org/2000/svg"
@@ -66,12 +59,12 @@ export const BrandAndResources: FC = () => {
             </g>
           </svg>
           <div className="flex-1">
-            <h2 className="font-bold text-lg">Give a talk</h2>
+            <h2 className="text-lg font-bold">Give a talk</h2>
             <p className="mb-3 text-zinc-500 dark:text-slate-400">
               Download presentation slides (Keynote, PDF).
             </p>
             <a
-              className="flex gap-2 items-center text-blue-500"
+              className="flex items-center gap-2 text-blue-500"
               href="https://github.com/storybookjs/brand/tree/master/presentation"
             >
               Download now

apps/frontpage/components/community/events.tsx

@@ -1,9 +1,6 @@
-import {
-  ChevronSmallRightIcon,
-  DiscordIcon,
-  TwitterIcon,
-} from '@storybook/icons';
+import { ChevronSmallRightIcon, DiscordIcon, XIcon } from '@storybook/icons';
 import type { FC } from 'react';
+import { BlueSkyIcon } from '@repo/ui';
 import { Youtube } from '../logos/youtube';
 import { Section } from './section';
 
@@ -33,40 +30,55 @@ export const Events: FC = () => {
           </div>
         </div>
         <div className="flex flex-1 gap-4 rounded border border-zinc-300 p-6 md:gap-6 md:p-8 dark:border-slate-700">
-          <TwitterIcon className="h-10 w-10 text-[#4999e9]" />
+          <DiscordIcon className="h-10 w-10 text-[#5a65ea]" />
           <div className="flex-1">
-            <h2 className="text-lg font-bold">Twitter</h2>
+            <h2 className="text-lg font-bold">Follow #announcements chat</h2>
             <p className="mb-3 text-zinc-500">
-              Get the latest event updates from Storybook maintainers.
+              Join our community chat to learn about live events and streams.
             </p>
             <a
               className="flex items-center gap-2 text-blue-500"
-              href="https://twitter.com/storybookjs"
+              href="https://discord.gg/storybook"
             >
-              Follow now
+              Chat now
               <ChevronSmallRightIcon />
             </a>
           </div>
         </div>
       </div>
       <div className="mb-8 flex flex-col gap-8 md:flex-row">
         <div className="flex flex-1 gap-4 rounded border border-zinc-300 p-6 md:gap-6 md:p-8 dark:border-slate-700">
-          <DiscordIcon className="h-10 w-10 text-[#5a65ea]" />
+          <BlueSkyIcon className="h-10 w-10" color="#0085ff" />
           <div className="flex-1">
-            <h2 className="text-lg font-bold">Follow #announcements chat</h2>
+            <h2 className="text-lg font-bold">Follow on BlueSky</h2>
             <p className="mb-3 text-zinc-500">
-              Join our community chat to learn about live events and streams.
+              Get the latest event updates from Storybook maintainers.
             </p>
             <a
               className="flex items-center gap-2 text-blue-500"
-              href="https://discord.gg/storybook"
+              href="https://bsky.app/profile/storybook.js.org"
             >
-              Chat now
+              Follow now
+              <ChevronSmallRightIcon />
+            </a>
+          </div>
+        </div>
+        <div className="flex flex-1 gap-4 rounded border border-zinc-300 p-6 md:gap-6 md:p-8 dark:border-slate-700">
+          <XIcon className="h-10 w-10" />
+          <div className="flex-1">
+            <h2 className="text-lg font-bold">Follow on X</h2>
+            <p className="mb-3 text-zinc-500">
+              Get the latest event updates from Storybook maintainers.
+            </p>
+            <a
+              className="flex items-center gap-2 text-blue-500"
+              href="https://twitter.com/storybookjs"
+            >
+              Follow now
               <ChevronSmallRightIcon />
             </a>
           </div>
         </div>
-        <div className="flex-1 px-6 md:px-8" />
       </div>
     </Section>
   );