feat: Onboard video in dashboard (#5725)

Author: kof

apps/builder/app/dashboard/dashboard.tsx

@@ -337,7 +337,7 @@ export const Dashboard = () => {
             />
             <Flex
               align="center"
-              gap="3"
+              gap="2"
               css={{
                 paddingInline: theme.panel.paddingInline,
                 paddingBlock: theme.spacing[5],

apps/builder/app/dashboard/welcome/welcome.tsx

@@ -1,55 +1,9 @@
 import { Flex, Text, Link, buttonStyle } from "@webstudio-is/design-system";
-import {
-  YoutubeIcon,
-  ContentIcon,
-  DiscordIcon,
-  XLogoIcon,
-  BlueskyIcon,
-  FacebookIcon,
-  RedditIcon,
-} from "@webstudio-is/icons";
 import { useStore } from "@nanostores/react";
 import { Main } from "../shared/layout";
 import { CreateProject } from "../projects/project-dialogs";
 import { $permissions } from "~/shared/nano-states";
 
-const guideItems = [
-  {
-    icon: <YoutubeIcon />,
-    label: "Watch video tutorials",
-    href: "https://wstd.us/101",
-  },
-  {
-    icon: <ContentIcon />,
-    label: "Read the docs",
-    href: "https://docs.webstudio.is/",
-  },
-  {
-    icon: <DiscordIcon />,
-    label: "Join the community on Discord",
-    href: "https://wstd.us/community",
-  },
-];
-
-const socialItems = [
-  { icon: <XLogoIcon />, label: "X", href: "https://x.com/getwebstudio" },
-  {
-    icon: <BlueskyIcon />,
-    label: "Bluesky",
-    href: "https://bsky.app/profile/webstudio.is",
-  },
-  {
-    icon: <FacebookIcon />,
-    label: "Facebook",
-    href: "https://www.facebook.com/getwebstudio1/",
-  },
-  {
-    icon: <RedditIcon />,
-    label: "Reddit",
-    href: "https://www.reddit.com/r/webstudio/",
-  },
-];
-
 export const Welcome = ({
   currentWorkspaceId,
 }: {
@@ -87,30 +41,16 @@ export const Welcome = ({
           )}
         </Flex>
 
-        <Flex direction="column" gap="2">
-          {guideItems.map(({ icon, label, href }) => (
-            <Flex key={href} align="center" gap="2">
-              {icon}
-              <Link href={href} target="_blank" color="subtle">
-                {label}
-              </Link>
-            </Flex>
-          ))}
-          <Flex align="center" gap="2">
-            <Text color="subtle">Follow for updates on:</Text>
-            {socialItems.map(({ icon, label, href }) => (
-              <Link
-                key={href}
-                href={href}
-                target="_blank"
-                color="subtle"
-                aria-label={label}
-              >
-                {icon}
-              </Link>
-            ))}
-          </Flex>
-        </Flex>
+        <iframe
+          width="560"
+          height="315"
+          src="https://www.youtube-nocookie.com/embed/W43QpuT3fW0?si=eGE-OU8emtIxzKPn"
+          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>
       </Flex>
     </Main>
   );

apps/builder/app/shared/help.tsx

@@ -5,6 +5,7 @@ import {
   XLogoIcon,
   BlueskyIcon,
   FacebookIcon,
+  LinkedinIcon,
   RedditIcon,
 } from "@webstudio-is/icons";
 
@@ -20,6 +21,11 @@ export const socialLinks = [
     url: "https://www.facebook.com/webstudiois",
     icon: <FacebookIcon />,
   },
+  {
+    label: "LinkedIn",
+    url: "https://www.linkedin.com/company/getwebstudio/",
+    icon: <LinkedinIcon />,
+  },
   {
     label: "Reddit",
     url: "https://www.reddit.com/r/webstudio/",