add imagery to landing page (#48)

apps/engine/src/app/(home)/layout.tsx

@@ -13,7 +13,7 @@ export default function Layout({
   return (
     <>
       <div className="landing-bg" />
-      <header className="sticky top-0 w-full flex justify-center">
+      <header className="sticky top-0 w-full flex justify-center z-10">
         <HomeNavigation />
       </header>
       <main className="flex min-h-screen w-full flex-col items-center py-2">

apps/engine/src/components/banners/community-banner/community-banner.tsx

@@ -1,15 +1,14 @@
 import { Icons, Text } from '@ds-project/components';
 import Link from 'next/link';
 import Image from 'next/image';
-import discordIcon from './discord-icon.png';
 import { Button } from '@/components/button';
 import { config } from '@/config';
 
 export function CommunityBanner() {
   return (
     <article
       id="community"
-      className="relative overflow-hidden flex flex-col gap-4 border border-zinc-600 rounded-md p-10 bg-zinc-900 text-zinc-50"
+      className="w-full relative overflow-hidden flex flex-col gap-4 border border-zinc-600 rounded-md p-10 bg-zinc-900 text-zinc-50"
     >
       <header>
         <Text size="lg">
@@ -29,9 +28,11 @@ export function CommunityBanner() {
         </Button>
       </div>
       <Image
-        src={discordIcon}
+        src="/img/discord.svg"
         alt=""
-        className="object-cover absolute size-64 -right-0 -top-10"
+        width={128}
+        height={97}
+        className="absolute -right-14 -bottom-12 size-80 opacity-35"
       />
     </article>
   );

apps/engine/src/components/banners/vision-banner/_components/card.tsx

@@ -1,13 +1,26 @@
-import { Text } from '@ds-project/components';
+import { AspectRatio, Text } from '@ds-project/components';
+import Image from 'next/image';
+import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
 
 interface CardProps {
   title: string;
   description: string;
+  coverImage: StaticImport;
 }
-export function Card({ description, title }: CardProps) {
+export function Card({ description, title, coverImage }: CardProps) {
   return (
     <div className="h-full p-4 rounded-md border bg-white border-zinc-300 flex gap-4 flex-col">
-      <div className="w-full h-44 bg-zinc-800 rounded-md"></div>
+      <AspectRatio
+        ratio={16 / 9}
+        className="w-full h-44 rounded-md overflow-hidden"
+      >
+        <Image
+          src={coverImage}
+          fill
+          alt="json file representing the design tokens"
+        />
+      </AspectRatio>
+
       <Text size="base" weight="medium" leading="tight">
         <h2>{title}</h2>
       </Text>

apps/engine/src/components/banners/vision-banner/vision-banner.tsx

@@ -2,21 +2,28 @@ import { Text } from '@ds-project/components';
 import { Card } from './_components/card';
 import { Pill } from '@/components/pill';
 
+import designTokensCover from './_assets/design-tokens.png';
+import integrationsCover from './_assets/integrations.png';
+import communityCover from './_assets/community.png';
+
 const cards = [
   {
     title: 'Design Tokens',
     description:
       'Synchronise, store and release design tokens directly from your design tool to your repositories.',
+    coverImage: designTokensCover,
   },
   {
     title: 'Integrations',
     description:
       'Seamlessly integrate your design system ecosystem so the tools work for you. And not the other way around.',
+    coverImage: integrationsCover,
   },
   {
     title: 'Community Driven',
     description:
       'Open-source solution, fostering collaboration and shared value.\nJoin our community.',
+    coverImage: communityCover,
   },
 ];
 

apps/engine/src/components/footer/_components/link.tsx

@@ -0,0 +1,15 @@
+import type NextLink from 'next/link';
+import { Link as StyledLink } from '../../link';
+import type { ComponentProps } from 'react';
+
+type LinkProps = ComponentProps<typeof NextLink>;
+export function Link({ children, ...props }: LinkProps) {
+  return (
+    <StyledLink
+      className="text-zinc-600 hover:text-zinc-400 no-underline"
+      {...props}
+    >
+      {children}
+    </StyledLink>
+  );
+}

apps/engine/src/components/footer/footer.tsx

@@ -1,37 +1,46 @@
-import { Icons, Text } from '@ds-project/components';
-import Link from 'next/link';
+import { DSProIcon, Icons, Text } from '@ds-project/components';
 import { Button } from '../button';
 import { CommunityBanner } from '../banners/community-banner';
 import { config } from '@/config';
+import { Link } from './_components/link';
 
 export function Footer() {
   return (
     <footer className="flex w-full">
-      <div className="flex w-full bg-gray-950 py-16 rounded-t-xl justify-center">
+      <div className="flex w-full bg-zinc-950 py-16 rounded-t-xl justify-center">
         <div className="w-full max-w-screen-lg flex flex-col gap-6 mx-4">
-          <CommunityBanner />
-          <div className="flex gap-2">
-            <Button asChild mode="dark" size="icon">
-              <Link href={config.discordInviteUrl}>
-                <Icons.DiscordLogoIcon />
-              </Link>
-            </Button>
-            <Button asChild mode="dark" size="icon">
-              <Link href="https://www.linkedin.com/company/design-system-project">
-                <Icons.LinkedInLogoIcon />
-              </Link>
-            </Button>
+          <div className="flex w-full justify-between items-start gap-24">
+            <div>
+              <DSProIcon width={72} height={72} className="text-white" />
+              <div className="flex gap-2">
+                <Button asChild mode="dark" size="icon">
+                  <Link href={config.githubUrl}>
+                    <Icons.GitHubLogoIcon />
+                  </Link>
+                </Button>
+                <Button asChild mode="dark" size="icon">
+                  <Link href={config.discordInviteUrl}>
+                    <Icons.DiscordLogoIcon />
+                  </Link>
+                </Button>
+                <Button asChild mode="dark" size="icon">
+                  <Link href={config.linkedinUrl}>
+                    <Icons.LinkedInLogoIcon />
+                  </Link>
+                </Button>
+              </div>
+            </div>
+            <CommunityBanner />
           </div>
-          <hr className="border-t-gray-600" />
-          <div className="flex justify-between">
-            <Text className="text-gray-600">
-              <p>Design System Project</p>
+          <hr className="border-t-zinc-600" />
+          <div className="flex justify-between text-zinc-600">
+            <Text size="sm">
+              <p>© {new Date().getFullYear()} DS Pro</p>
             </Text>
-            <Link href="mailto:[email protected]">
-              <Text className="text-gray-600">
-                <p>[email protected]</p>
-              </Text>
-            </Link>
+            {/* <Link href="/terms">Terms of Service</Link>
+            <Link href="/privacy">Privacy</Link>
+            <Link href="/accessibility">Accessibility</Link> */}
+            <Link href="mailto:[email protected]">[email protected]</Link>
           </div>
         </div>
       </div>

apps/engine/src/components/hero/hero.tsx

@@ -1,9 +1,9 @@
 import { FigmaLogo, GithubLogo, Icons, Text } from '@ds-project/components';
 import { Button } from '../button';
 import Image from 'next/image';
-import frame from './frame.svg';
 import { Pill } from '../pill';
 import Link from 'next/link';
+import frameImage from './frame-image.png';
 
 const compatibleWith = [
   {
@@ -73,9 +73,14 @@ export function Hero() {
           </ul>
         </div>
       </div>
-      <div className="w-7/12 md:w-full">
-        <Image src={frame} alt="" />
+      <div className="w-7/12 md:w-full overflow-hidden rounded-md">
+        <Image src={frameImage} alt="" />
       </div>
+      <svg className="absolute w-0 h-0">
+        <clipPath id="frame-path" clipPathUnits="objectBoundingBox">
+          <path d="M1,0.041 V0.961 C1,0.983,0.985,1,0.965,1 H0.036 C0.017,1,0.001,0.983,0.001,0.961 V0.523 C0.001,0.501,0.017,0.483,0.036,0.483 H0.143 C0.163,0.483,0.18,0.464,0.18,0.441 V0.041 C0.18,0.019,0.196,0.001,0.215,0.001 H0.965 C0.985,0.001,1,0.019,1,0.041"></path>
+        </clipPath>
+      </svg>
     </section>
   );
 }

apps/engine/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './integration-card';
 export * from './integration-logo';
 export * from './integration-settings';
 export * from './json-block';
+export * from './link';
 export * from './main-content';
 export * from './support-button';
 export * from './tooltip-info';

apps/engine/src/components/link/index.ts

@@ -0,0 +1 @@
+export * from './link';

apps/engine/src/components/link/link.tsx

@@ -0,0 +1,12 @@
+import NextLink from 'next/link';
+import { Link as StyledLink } from '@ds-project/components';
+import type { ComponentProps } from 'react';
+
+type LinkProps = ComponentProps<typeof NextLink>;
+export function Link({ children, ...props }: LinkProps) {
+  return (
+    <StyledLink asChild>
+      <NextLink {...props}>{children}</NextLink>
+    </StyledLink>
+  );
+}

apps/engine/src/config.ts

@@ -30,5 +30,6 @@ export const config = {
   figmaWidgetUrl: 'https://www.figma.com/community/widget/1415369860836124974',
   feedbackUrl: 'https://ds-project.supahub.com',
   githubUrl: 'https://github.com/Design-System-Pro',
+  linkedinUrl: 'https://www.linkedin.com/company/design-system-pro',
   supportEmail: '[email protected]',
 } as const;

apps/engine/tsconfig.json

@@ -23,7 +23,7 @@
     }
   },
   "include": [
-    "globals.d.ts",
+    "src/globals.d.ts",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",

packages/components/src/icons/ds-icon.tsx

@@ -0,0 +1,33 @@
+import type { IconProps } from '@radix-ui/react-icons/dist/types';
+import * as React from 'react';
+
+export const DSIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  (props, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="512"
+        height="512"
+        viewBox="0 0 512 512"
+        fill="none"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill="currentColor"
+          d="M375.251 171.237c10.845 3.697 21.443 8.38 31.794 14.048l20.334-41.036c-10.845-7.148-23.168-13.31-36.97-18.485-13.556-5.176-31.301-7.764-53.237-7.764-16.76.739-31.548 4.56-44.364 11.461-6.351 3.297-12.006 7.2-16.965 11.708 5.641 4.579 11.217 9.806 15.841 15.211 7.15 8.2 13.244 16.963 18.266 26.278 1.644-4.033 4.31-7.347 7.998-9.942 6.654-4.683 15.774-7.025 27.358-7.025 9.365 0 19.347 1.849 29.945 5.546ZM308.063 195.97a23.045 23.045 0 0 0 2.375 8.443c-2.554-3.53-4.813-7.216-6.982-10.754-1.8-2.937-3.537-5.772-5.329-8.331-2.737-3.91-8.403-11.967-11.458-16.041l-.096.053a137.371 137.371 0 0 0-4.138-4.972c-4.146-4.851-9.661-10.053-14.88-14.286a73.31 73.31 0 0 0-4.692 6.736c-6.901 11.584-10.352 25.263-10.352 41.037 0 13.063 2.341 24.154 7.024 33.273 4.93 8.873 11.214 16.39 18.855 22.552a145.012 145.012 0 0 0 25.139 15.157c8.873 4.19 17.5 7.887 25.879 11.091 7.148 2.711 13.679 5.916 19.595 9.613 6.161 3.697 10.967 7.763 14.418 12.2 3.697 4.436 5.545 9.365 5.545 14.788 0 7.886-2.218 14.048-6.654 18.485-4.19 4.436-9.612 7.64-16.267 9.612-6.408 1.725-12.816 2.588-19.224 2.588-6.409 0-13.433-.986-21.073-2.958-.801-.206-1.601-.421-2.401-.644-5.514 7.796-12.212 15.469-19.285 21.987l-.048.044-.049.044a143.697 143.697 0 0 1-19.263 14.636c1.23.563 2.466 1.111 3.706 1.642 10.352 4.19 20.826 7.394 31.425 9.613 10.844 1.971 21.442 2.957 31.794 2.957 20.21 0 37.216-3.574 51.018-10.721 13.802-7.394 24.277-17.006 31.425-28.837 7.147-11.83 10.721-24.646 10.721-38.448 0-13.063-1.849-24.031-5.546-32.904-3.697-9.119-8.626-16.636-14.788-22.551-6.161-6.162-13.185-11.215-21.072-15.158-7.641-4.19-15.405-7.764-23.291-10.721a284.893 284.893 0 0 1-25.14-10.722c-7.887-3.943-14.418-8.379-19.594-13.309-4.364-4.582-6.796-9.647-7.297-15.194Z"
+        />
+        <path
+          fill="currentColor"
+          d="M251.869 373.755a131.796 131.796 0 0 0 23.911-17.143c5.458-5.03 10.802-11.156 15.262-17.064a151.759 151.759 0 0 1-8.216-3.425c-7.394-3.697-14.295-7.887-20.703-12.57l-23.661 41.776a176.433 176.433 0 0 0 13.407 8.426Z"
+        />
+        <path
+          fill="currentColor"
+          d="M85 119.48v272.099h94.643c18.485 0 35.984-2.957 52.497-8.873 16.514-6.161 31.055-14.911 43.625-26.248 12.57-11.584 22.428-25.386 29.576-41.407 3.982-8.761 6.892-18.095 8.73-28.001a404.851 404.851 0 0 1-15.746-7.039 157.175 157.175 0 0 1-27.254-16.432l-.172-.128-.167-.135a87.022 87.022 0 0 1-9.762-9.197c-.085-4.993-.413-9.713-.984-14.159.66 5.188.991 10.748.991 16.679 0 13.556-2.218 25.632-6.655 36.23-4.19 10.352-10.351 18.978-18.485 25.879-7.887 6.902-17.375 12.201-28.466 15.898-11.091 3.45-23.415 5.175-36.97 5.175h-31.795V170.869h43.625c6.162 0 13.679 1.232 22.552 3.697 8.872 2.218 17.499 6.408 25.879 12.569 8.626 6.162 15.773 14.912 21.442 26.249 1.967 3.688 3.607 7.743 4.92 12.167a55.367 55.367 0 0 0 2.525 5.7c4.929 8.872 11.214 16.39 18.855 22.551a145.017 145.017 0 0 0 25.139 15.158 400.583 400.583 0 0 0 12.254 5.541c.423-4.609.635-9.331.635-14.165 0-17.006-2.711-33.889-8.134-50.649-5.422-16.76-14.048-31.917-25.879-45.473-11.583-13.556-26.988-24.4-46.212-32.533-19.224-8.134-42.515-12.201-69.873-12.201H85Z"
+        />
+      </svg>
+    );
+  }
+);
+
+DSIcon.displayName = 'DSIcon';

packages/components/src/icons/ds-pro-icon.tsx

@@ -0,0 +1,33 @@
+import type { IconProps } from '@radix-ui/react-icons/dist/types';
+import * as React from 'react';
+
+export const DSProIcon = React.forwardRef<SVGSVGElement, IconProps>(
+  (props, forwardedRef) => {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 527 279"
+        width="527"
+        height="279"
+        fill="none"
+        {...props}
+        ref={forwardedRef}
+      >
+        <path
+          fill="currentColor"
+          d="M290.251 53.237c10.845 3.697 21.443 8.38 31.794 14.048l20.334-41.036c-10.845-7.148-23.168-13.31-36.97-18.485C291.853 2.588 274.108 0 252.172 0c-16.76.74-31.548 4.56-44.364 11.46-6.351 3.298-12.006 7.201-16.965 11.71 5.641 4.578 11.217 9.805 15.841 15.21 7.15 8.2 13.244 16.963 18.266 26.278 1.644-4.033 4.31-7.347 7.998-9.943 6.654-4.682 15.774-7.024 27.358-7.024 9.365 0 19.347 1.849 29.945 5.546ZM223.063 77.97a23.046 23.046 0 0 0 2.375 8.443c-2.554-3.53-4.813-7.216-6.982-10.754-1.8-2.937-3.537-5.772-5.329-8.331-2.737-3.91-8.403-11.967-11.458-16.041l-.096.053a137.8 137.8 0 0 0-4.138-4.972c-4.146-4.85-9.661-10.053-14.88-14.286a73.286 73.286 0 0 0-4.692 6.736c-6.901 11.584-10.352 25.263-10.352 41.037 0 13.063 2.341 24.154 7.024 33.273 4.93 8.873 11.214 16.39 18.855 22.552a145.012 145.012 0 0 0 25.139 15.157c8.873 4.19 17.5 7.887 25.879 11.091 7.148 2.711 13.679 5.916 19.595 9.613 6.161 3.697 10.967 7.763 14.418 12.2 3.697 4.436 5.545 9.365 5.545 14.788 0 7.886-2.218 14.048-6.654 18.485-4.19 4.436-9.612 7.64-16.267 9.612-6.408 1.725-12.816 2.588-19.224 2.588-6.409 0-13.433-.986-21.073-2.958-.801-.206-1.601-.421-2.401-.644-5.514 7.796-12.212 15.469-19.285 21.987l-.048.044-.049.044a143.697 143.697 0 0 1-19.263 14.636c1.23.563 2.466 1.111 3.706 1.642 10.352 4.19 20.826 7.394 31.425 9.613 10.844 1.971 21.442 2.957 31.794 2.957 20.21 0 37.216-3.574 51.018-10.721 13.802-7.394 24.277-17.006 31.425-28.837 7.147-11.83 10.721-24.646 10.721-38.448 0-13.063-1.849-24.031-5.546-32.904-3.697-9.119-8.626-16.636-14.788-22.551-6.161-6.162-13.185-11.215-21.072-15.158-7.641-4.19-15.405-7.764-23.291-10.721a284.893 284.893 0 0 1-25.14-10.722c-7.887-3.943-14.418-8.38-19.594-13.309-4.364-4.582-6.796-9.647-7.297-15.194Z"
+        />
+        <path
+          fill="currentColor"
+          d="M166.869 255.755a131.796 131.796 0 0 0 23.911-17.143c5.458-5.03 10.802-11.156 15.262-17.064a151.759 151.759 0 0 1-8.216-3.425c-7.394-3.697-14.295-7.887-20.703-12.57l-23.661 41.776a176.433 176.433 0 0 0 13.407 8.426Z"
+        />
+        <path
+          fill="currentColor"
+          d="M0 1.48V273.58h94.643c18.485 0 35.984-2.957 52.497-8.873 16.514-6.161 31.055-14.911 43.625-26.248 12.57-11.584 22.428-25.386 29.576-41.407 3.982-8.761 6.892-18.095 8.73-28.001a404.851 404.851 0 0 1-15.746-7.039 157.175 157.175 0 0 1-27.254-16.432l-.172-.128-.167-.135a87.022 87.022 0 0 1-9.762-9.197c-.085-4.993-.413-9.713-.984-14.159.66 5.188.991 10.748.991 16.679 0 13.556-2.218 25.632-6.655 36.23-4.19 10.352-10.351 18.978-18.485 25.879-7.887 6.902-17.375 12.201-28.466 15.898-11.091 3.45-23.415 5.175-36.97 5.175H53.606V52.869h43.625c6.162 0 13.679 1.232 22.552 3.697 8.872 2.218 17.499 6.408 25.879 12.57 8.626 6.161 15.773 14.91 21.442 26.248 1.967 3.688 3.607 7.743 4.92 12.167a55.367 55.367 0 0 0 2.525 5.7c4.929 8.872 11.214 16.39 18.855 22.551a145.017 145.017 0 0 0 25.139 15.158 400.583 400.583 0 0 0 12.254 5.541c.423-4.609.635-9.331.635-14.165 0-17.006-2.711-33.889-8.134-50.649-5.422-16.76-14.048-31.917-25.879-45.473-11.583-13.556-26.988-24.4-46.212-32.533-19.224-8.134-42.515-12.2-69.873-12.2H0ZM356.177 271.942c-2.391 0-4.443-.845-6.158-2.536-1.69-1.714-2.535-3.767-2.535-6.157 0-2.367.845-4.395 2.535-6.086 1.715-1.69 3.767-2.535 6.158-2.535 2.318 0 4.346.845 6.085 2.535 1.739 1.691 2.608 3.719 2.608 6.086 0 1.593-.41 3.054-1.232 4.382a9.36 9.36 0 0 1-3.151 3.152c-1.304.772-2.741 1.159-4.31 1.159Zm17.571-.942v-74.182h29.267c5.627 0 10.42 1.075 14.38 3.224 3.961 2.125 6.979 5.083 9.056 8.874 2.101 3.767 3.151 8.114 3.151 13.04 0 4.926-1.062 9.273-3.187 13.04-2.125 3.767-5.204 6.701-9.237 8.802-4.009 2.1-8.862 3.151-14.561 3.151h-18.654V234.38h16.118c3.019 0 5.506-.519 7.462-1.558 1.98-1.062 3.453-2.523 4.419-4.382.99-1.884 1.485-4.045 1.485-6.484 0-2.463-.495-4.612-1.485-6.447-.966-1.86-2.439-3.297-4.419-4.311-1.98-1.038-4.491-1.557-7.534-1.557h-10.577V271h-15.684Zm61.672 0v-55.636h14.959v9.707h.58c1.014-3.453 2.716-6.061 5.107-7.824 2.39-1.787 5.143-2.68 8.258-2.68.773 0 1.606.048 2.5.145.893.096 1.678.229 2.354.398v13.692c-.724-.217-1.726-.411-3.006-.58a27.01 27.01 0 0 0-3.514-.253c-2.27 0-4.298.495-6.085 1.485a10.937 10.937 0 0 0-4.202 4.057c-1.014 1.738-1.521 3.743-1.521 6.012V271h-15.43Zm60.204 1.087c-5.627 0-10.492-1.196-14.597-3.586-4.081-2.415-7.233-5.772-9.454-10.07-2.222-4.322-3.333-9.333-3.333-15.032 0-5.747 1.111-10.77 3.333-15.068 2.221-4.322 5.373-7.679 9.454-10.07 4.105-2.414 8.97-3.622 14.597-3.622 5.626 0 10.48 1.208 14.561 3.622 4.105 2.391 7.268 5.748 9.49 10.07 2.222 4.298 3.332 9.321 3.332 15.068 0 5.699-1.11 10.71-3.332 15.032-2.222 4.298-5.385 7.655-9.49 10.07-4.081 2.39-8.935 3.586-14.561 3.586Zm.072-11.953c2.56 0 4.697-.725 6.411-2.174 1.715-1.473 3.007-3.477 3.876-6.013.894-2.535 1.34-5.421 1.34-8.657 0-3.235-.446-6.121-1.34-8.656-.869-2.536-2.161-4.54-3.876-6.013-1.714-1.473-3.851-2.21-6.411-2.21-2.584 0-4.757.737-6.52 2.21-1.738 1.473-3.054 3.477-3.948 6.013-.869 2.535-1.304 5.421-1.304 8.656 0 3.236.435 6.122 1.304 8.657.894 2.536 2.21 4.54 3.948 6.013 1.763 1.449 3.936 2.174 6.52 2.174Z"
+        />
+      </svg>
+    );
+  }
+);
+
+DSProIcon.displayName = 'DSProIcon';