Merge pull request #1328 from vtex/docs/landing-page-assets

docs(lading-page): replace assets

packages/next-docs/components/mode/index.ts

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

packages/next-docs/components/mode/mode.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react'
+import React from 'react'
+import { useTheme } from 'nextra-theme-docs'
+
+interface Props {
+  children?: ReactNode
+}
+
+export function DarkMode(props: Props) {
+  const { children } = props
+  const mode = useTheme()
+
+  if (mode.resolvedTheme === 'dark') {
+    return <>{children}</>
+  }
+
+  return null
+}
+
+export function LightMode(props: Props) {
+  const { children } = props
+  const mode = useTheme()
+
+  if (mode.resolvedTheme === 'light') {
+    return <>{children}</>
+  }
+
+  return null
+}

packages/next-docs/components/no-ssr/index.ts

@@ -0,0 +1 @@
+export * from './no-ssr'

packages/next-docs/components/no-ssr/no-ssr.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react'
+import React, { useState, useEffect } from 'react'
+
+export function NoSSR(props: Props) {
+  const { children, fallback = <></> } = props
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
+  return <>{isClient ? children : fallback}</>
+}
+
+interface Props {
+  children: ReactNode
+  fallback?: ReactNode
+}

packages/next-docs/pages/index.mdx

@@ -2,45 +2,83 @@
 title: Shoreline - VTEX Desing System
 ---
 
-import { heroContainer, hero, subtitle, features, feature } from './index.module.css'
+import { heroContainer, hero, subtitle, title, features, feature, featuresContainer, featureImageContainer } from './index.module.css'
+import { LightMode, DarkMode } from '../components/mode'
+import { NoSSR } from '../components/no-ssr'
+import Link from 'next/link'
 
-<div className={heroContainer}>
-  <section className={hero}>
-    <img src='assets/landing-shoreline-logo.png' alt="shoreline logo" />
+<section className={heroContainer}>
+  <article className={hero}>
+    <NoSSR fallback={<div />}>
+      <LightMode>
+        <img src='/assets/landing-logo.png' alt="shoreline logo" suppressHydrationWarning />
+      </LightMode>
+      <DarkMode>
+        <img src='/assets/landing-logo-dark.png' alt="shoreline logo" suppressHydrationWarning />
+      </DarkMode>
+    </NoSSR>
     <div>  
-      <h2>Build great experiences for merchants in the VTEX Admin.</h2>
-      <p className={subtitle}>Shoreline is a design system tailored for enhancing back-office experiences. The system provide design and coding tools and resources for an optimized development experience.</p>
+      <h2>Build great experiences for merchants in the VTEX Admin</h2>
+      <p className={subtitle}>
+        Shoreline is a design system tailored for enhancing back-office experiences. The system provide design and coding tools and resources for an optimized development experience
+      </p>
     </div>
-  </section>
-</div>
-
-<section className={features}>
-  <div className={feature}>
-    <img src='assets/landing-foundations.png' alt="feature foundations" />
-    <div>
-      <h3>Foundations</h3>
-      <p className={subtitle}>Fundamental design guidance for creating quality admin experiences</p>
-    </div>
-  </div>
-  <div className={feature}>
-    <img src='assets/landing-components.png' alt="feature components" />
-    <div>
-      <h3>Components</h3>
-      <p className={subtitle}>Reusable elements and styles, packaged through code, for building admin interfaces</p>
-    </div>
-  </div>
-  <div className={feature}>
-    <img src='assets/landing-raccoon.png' alt="feature raccoon" />
-    <div>
-      <h3>Raccoon</h3>
-      <p className={subtitle}>Coded names that represent design decisions for color, spacing, typography, and more</p>
-    </div>
-  </div>
-  <div className={feature}>
-    <img src='assets/landing-code.png' alt="feature api" />
-    <div>
-      <h3>API Reference</h3>
-      <p className={subtitle}>Over 400 carefully designed icons focused on commerce and entrepreneurship</p>
-    </div>
-  </div>
+  </article>
 </section>
+
+<section className={featuresContainer}>
+  <ul className={features}>
+    <li>
+      <Link href="/foundations">
+        <article className={feature}>
+          <div className={featureImageContainer}>
+            <img src='assets/landing-foundations.png' alt="feature foundations" />
+          </div>
+          <div>
+            <h3 className={title}>Foundations</h3>
+            <p className={subtitle}>Fundamental design guidance for creating quality admin experiences</p>
+          </div>
+        </article>
+      </Link>
+    </li>
+    <li>
+      <Link href="/components/button/best-practices">
+        <article className={feature}>
+          <div className={featureImageContainer}>
+            <img src='assets/landing-components.png' alt="feature components" />
+          </div>
+          <div>
+            <h3 className={title}>Components</h3>
+            <p className={subtitle}>Reusable elements and styles, packaged through code, for building admin interfaces</p>
+          </div>
+        </article>
+      </Link>
+    </li>
+    <li>
+      <Link href="/raccoon/getting-started">
+        <article className={feature}>
+          <div className={featureImageContainer}>
+            <img src='assets/landing-raccoon.png' alt="feature raccoon" />
+          </div>
+          <div>
+            <h3 className={title}>Raccoon</h3>
+            <p className={subtitle}>Coded names that represent design decisions for color, spacing, typography, and more</p>
+          </div>
+        </article>
+      </Link>
+    </li>
+    <li>
+      <Link href="/api-reference/cli/introduction">
+        <article className={feature}>
+          <div className={featureImageContainer}>
+            <img src='assets/landing-api-reference.png' alt="feature api" />
+          </div>
+          <div>
+            <h3 className={title}>API Reference</h3>
+            <p className={subtitle}>Over 400 carefully designed icons focused on commerce and entrepreneurship</p>
+          </div>
+        </article>
+      </Link>
+    </li>
+  </ul>
+</section>

packages/next-docs/pages/index.module.css

@@ -8,6 +8,7 @@
 .hero {
   display: grid;
   grid-template-columns: 1fr 1fr;
+  align-items: center;
   gap: 15cqi;
   padding: 4.625rem 2.125rem;
   width: 100%;
@@ -28,6 +29,10 @@
   .hero {
     grid-template-columns: 1fr;
   }
+
+  .hero h2 {
+    line-height: 3rem;
+  }
 }
 
 .subtitle {
@@ -36,7 +41,7 @@
   font-size: 1rem;
   font-style: normal;
   font-weight: 400;
-  line-height: 1.5rem; /* 150% */
+  line-height: 1.5rem;
   letter-spacing: -0.02rem;
   opacity: 0.8;
 }
@@ -49,6 +54,12 @@
   font-weight: 600;
   line-height: 2.25rem;
   letter-spacing: -0.07rem;
+  padding-bottom: 0.625rem;
+}
+
+.featuresContainer {
+  container: features / inline-size;
+  width: 100%;
 }
 
 .features {
@@ -58,11 +69,48 @@
 }
 
 .feature {
+  container: feature / inline-size;
   display: flex;
   flex-direction: column;
   gap: 1.75rem;
+  padding: 0.8rem;
+  cursor: pointer;
+  border-radius: 1.5rem;
 }
 
-.feature h3 {
-  padding-bottom: 0.625rem;
+.feature:hover > .featureImageContainer > img,
+.feature:focus > .featureImageContainer > img {
+  transform: scale(1.1);
+}
+
+.featureImageContainer {
+  overflow: hidden;
+  width: 100cqi;
+  aspect-ratio: 1 / 1;
+  position: relative;
+  display: inline-block;
+  border-radius: 1.5rem;
+}
+
+.featureImageContainer > img {
+  width: 100%;
+  height: 100%;
+  border-radius: 1.5rem;
+  transition: transform 250ms ease-in-out;
+}
+
+.feature:hover {
+  background: hsla(200, 0%, 0%, 0.05);
+}
+
+@media (prefers-color-scheme: dark) {
+  .feature:hover {
+    background: hsla(200, 100%, 100%, 0.05);
+  }
+}
+
+@container (max-width: 40rem) {
+  .features {
+    gap: 5rem;
+  }
 }

packages/next-docs/theme.config.tsx

@@ -4,23 +4,59 @@ import { Playground } from './components/playground'
 import { TokensGrid } from './components/tokens-grid'
 import { IconsGrid } from './components/icons-grid'
 
-const containerStyle = {
-  fontWeight: 'bold',
-  fontSize: '2rem',
-  fontFamily: 'Inter',
-}
+const containerStyle = {}
 
 const config: DocsThemeConfig = {
   logo: (
     <span style={containerStyle}>
-      <span
-        style={{
-          fontSize: '2.5rem',
-        }}
+      <svg
+        width="136"
+        height="20"
+        viewBox="0 0 136 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        ≈
-      </span>
-      Shoreline
+        <path
+          d="M128.701 19.9999C127.261 19.9999 126.022 19.7083 124.983 19.1251C123.951 18.5359 123.155 17.7037 122.596 16.6286C122.037 15.5473 121.758 14.2686 121.758 12.7926C121.758 11.3529 122.037 10.0894 122.596 9.00213C123.155 7.91481 123.942 7.06743 124.956 6.45999C125.976 5.85255 127.173 5.54883 128.546 5.54883C129.469 5.54883 130.329 5.69765 131.125 5.9953C131.926 6.28687 132.625 6.72726 133.22 7.31648C133.822 7.9057 134.289 8.64678 134.623 9.53972C134.958 10.4266 135.125 11.4653 135.125 12.6559V13.7219H123.307V11.3165H131.471C131.471 10.7576 131.349 10.2626 131.106 9.83129C130.863 9.4 130.526 9.06287 130.095 8.8199C129.67 8.57085 129.175 8.44632 128.61 8.44632C128.021 8.44632 127.498 8.583 127.043 8.85634C126.593 9.12362 126.241 9.48505 125.986 9.94063C125.73 10.3901 125.6 10.8913 125.594 11.444V13.7311C125.594 14.4235 125.721 15.0219 125.976 15.526C126.238 16.0302 126.605 16.419 127.079 16.6923C127.553 16.9657 128.115 17.1024 128.765 17.1024C129.196 17.1024 129.591 17.0416 129.949 16.9201C130.308 16.7986 130.614 16.6164 130.869 16.3734C131.125 16.1305 131.319 15.8328 131.453 15.4805L135.043 15.7174C134.86 16.58 134.487 17.3332 133.922 17.9771C133.363 18.6149 132.64 19.113 131.753 19.4714C130.872 19.8237 129.855 19.9999 128.701 19.9999Z"
+          fill="currentColor"
+        />
+        <path
+          d="M111.268 11.6354V19.7265H107.387V5.73106H111.086V8.20031H111.25C111.56 7.38634 112.079 6.74245 112.808 6.26864C113.537 5.78877 114.421 5.54883 115.46 5.54883C116.432 5.54883 117.279 5.76143 118.002 6.18664C118.725 6.61185 119.286 7.21929 119.687 8.00896C120.088 8.79256 120.289 9.72802 120.289 10.8153V19.7265H116.407V11.5078C116.413 10.6513 116.195 9.98315 115.751 9.50327C115.308 9.01732 114.697 8.77434 113.92 8.77434C113.397 8.77434 112.936 8.88672 112.535 9.11147C112.14 9.33622 111.83 9.66424 111.605 10.0955C111.387 10.5207 111.274 11.034 111.268 11.6354Z"
+          fill="currentColor"
+        />
+        <path
+          d="M101.423 19.7267V5.73121H105.305V19.7267H101.423ZM103.373 3.92711C102.796 3.92711 102.301 3.73576 101.888 3.35307C101.481 2.96431 101.277 2.49962 101.277 1.959C101.277 1.42445 101.481 0.965832 101.888 0.583144C102.301 0.194381 102.796 0 103.373 0C103.95 0 104.442 0.194381 104.849 0.583144C105.262 0.965832 105.469 1.42445 105.469 1.959C105.469 2.49962 105.262 2.96431 104.849 3.35307C104.442 3.73576 103.95 3.92711 103.373 3.92711Z"
+          fill="currentColor"
+        />
+        <path
+          d="M99.3425 1.06543V19.726H95.4609V1.06543H99.3425Z"
+          fill="currentColor"
+        />
+        <path
+          d="M87.529 19.9999C86.0894 19.9999 84.8502 19.7083 83.8115 19.1251C82.7788 18.5359 81.9831 17.7037 81.4242 16.6286C80.8654 15.5473 80.5859 14.2686 80.5859 12.7926C80.5859 11.3529 80.8654 10.0894 81.4242 9.00213C81.9831 7.91481 82.7697 7.06743 83.7841 6.45999C84.8046 5.85255 86.0013 5.54883 87.3741 5.54883C88.2974 5.54883 89.1569 5.69765 89.9527 5.9953C90.7545 6.28687 91.4531 6.72726 92.0484 7.31648C92.6497 7.9057 93.1174 8.64678 93.4515 9.53972C93.7856 10.4266 93.9527 11.4653 93.9527 12.6559V13.7219H82.1349V11.3165H90.2989C90.2989 10.7576 90.1774 10.2626 89.9345 9.83129C89.6915 9.4 89.3544 9.06287 88.9231 8.8199C88.4979 8.57085 88.0028 8.44632 87.4379 8.44632C86.8487 8.44632 86.3263 8.583 85.8707 8.85634C85.4212 9.12362 85.0689 9.48505 84.8137 9.94063C84.5586 10.3901 84.428 10.8913 84.4219 11.444V13.7311C84.4219 14.4235 84.5495 15.0219 84.8046 15.526C85.0658 16.0302 85.4333 16.419 85.9071 16.6923C86.3809 16.9657 86.9428 17.1024 87.5928 17.1024C88.0241 17.1024 88.4189 17.0416 88.7773 16.9201C89.1357 16.7986 89.4424 16.6164 89.6976 16.3734C89.9527 16.1305 90.1471 15.8328 90.2807 15.4805L93.8707 15.7174C93.6884 16.58 93.3149 17.3332 92.7499 17.9771C92.1911 18.6149 91.4682 19.113 90.5814 19.4714C89.7006 19.8237 88.6831 19.9999 87.529 19.9999Z"
+          fill="currentColor"
+        />
+        <path
+          d="M72.332 19.7271V5.73171H76.0951V8.17362H76.2409C76.496 7.30498 76.9243 6.64894 77.5257 6.20551C78.127 5.756 78.8195 5.53125 79.6031 5.53125C79.7975 5.53125 80.0071 5.5434 80.2318 5.5677C80.4566 5.59199 80.654 5.6254 80.8241 5.66792V9.11212C80.6418 9.05745 80.3897 9.00885 80.0678 8.96633C79.7459 8.92381 79.4512 8.90255 79.184 8.90255C78.613 8.90255 78.1027 9.02707 77.6532 9.27613C77.2098 9.5191 76.8575 9.85927 76.5963 10.2966C76.3411 10.734 76.2136 11.2382 76.2136 11.8092V19.7271H72.332Z"
+          fill="currentColor"
+        />
+        <path
+          d="M63.9431 19.9999C62.5277 19.9999 61.3037 19.6992 60.2711 19.0978C59.2445 18.4904 58.4518 17.646 57.893 16.5648C57.3341 15.4775 57.0547 14.217 57.0547 12.7835C57.0547 11.3377 57.3341 10.0743 57.893 8.99302C58.4518 7.9057 59.2445 7.06136 60.2711 6.45999C61.3037 5.85255 62.5277 5.54883 63.9431 5.54883C65.3584 5.54883 66.5794 5.85255 67.6059 6.45999C68.6386 7.06136 69.4343 7.9057 69.9932 8.99302C70.552 10.0743 70.8315 11.3377 70.8315 12.7835C70.8315 14.217 70.552 15.4775 69.9932 16.5648C69.4343 17.646 68.6386 18.4904 67.6059 19.0978C66.5794 19.6992 65.3584 19.9999 63.9431 19.9999ZM63.9613 16.993C64.6052 16.993 65.1428 16.8108 65.574 16.4463C66.0053 16.0758 66.3303 15.5716 66.549 14.9338C66.7737 14.296 66.8861 13.5701 66.8861 12.7561C66.8861 11.9421 66.7737 11.2163 66.549 10.5784C66.3303 9.94063 66.0053 9.43645 65.574 9.06591C65.1428 8.69537 64.6052 8.5101 63.9613 8.5101C63.3113 8.5101 62.7646 8.69537 62.3212 9.06591C61.8838 9.43645 61.5528 9.94063 61.328 10.5784C61.1094 11.2163 61 11.9421 61 12.7561C61 13.5701 61.1094 14.296 61.328 14.9338C61.5528 15.5716 61.8838 16.0758 62.3212 16.4463C62.7646 16.8108 63.3113 16.993 63.9613 16.993Z"
+          fill="currentColor"
+        />
+        <path
+          d="M46.5183 11.6349V19.726H42.6367V1.06543H46.4089V8.19983H46.5729C46.8888 7.37371 47.3991 6.72678 48.1037 6.25905C48.8083 5.78525 49.6921 5.54835 50.7552 5.54835C51.7271 5.54835 52.5745 5.76095 53.2973 6.18616C54.0262 6.60529 54.5912 7.2097 54.9921 7.99937C55.3991 8.78297 55.5995 9.72147 55.5934 10.8149V19.726H51.7119V11.5073C51.718 10.6448 51.4993 9.97355 51.0559 9.49368C50.6185 9.0138 50.005 8.77386 49.2153 8.77386C48.6868 8.77386 48.2191 8.88623 47.8121 9.11099C47.4112 9.33574 47.0953 9.66376 46.8645 10.095C46.6398 10.5203 46.5243 11.0335 46.5183 11.6349Z"
+          fill="currentColor"
+        />
+        <path
+          d="M37.0447 6.43242C36.9718 5.69741 36.659 5.12642 36.1062 4.71943C35.5534 4.31244 34.8032 4.10895 33.8556 4.10895C33.2117 4.10895 32.6681 4.20007 32.2246 4.3823C31.7812 4.55846 31.441 4.80447 31.2041 5.12034C30.9733 5.43621 30.8579 5.7946 30.8579 6.19551C30.8457 6.52961 30.9156 6.82118 31.0675 7.07023C31.2254 7.31928 31.441 7.53492 31.7144 7.71715C31.9877 7.89331 32.3036 8.04821 32.662 8.18184C33.0204 8.30941 33.4031 8.41875 33.8101 8.50986L35.4866 8.91077C36.3006 9.09301 37.0477 9.33598 37.7281 9.6397C38.4084 9.94343 38.9976 10.317 39.4957 10.7604C39.9938 11.2039 40.3795 11.7263 40.6529 12.3276C40.9323 12.929 41.0751 13.6184 41.0811 14.396C41.0751 15.538 40.7835 16.5281 40.2064 17.3664C39.6354 18.1985 38.8093 18.8455 37.7281 19.3071C36.6529 19.7627 35.356 19.9905 33.8374 19.9905C32.3309 19.9905 31.0189 19.7597 29.9012 19.298C28.7896 18.8364 27.9209 18.153 27.2953 17.2479C26.6757 16.3367 26.3507 15.2099 26.3203 13.8675H30.1381C30.1806 14.4932 30.3598 15.0156 30.6757 15.4347C30.9976 15.8478 31.4259 16.1606 31.9604 16.3732C32.501 16.5797 33.1115 16.683 33.7918 16.683C34.46 16.683 35.0401 16.5858 35.5322 16.3914C36.0303 16.197 36.416 15.9267 36.6893 15.5805C36.9627 15.2342 37.0994 14.8364 37.0994 14.3869C37.0994 13.9677 36.9748 13.6154 36.7258 13.3299C36.4828 13.0444 36.1244 12.8014 35.6506 12.601C35.1829 12.4005 34.6088 12.2183 33.9285 12.0543L31.8966 11.544C30.3233 11.1613 29.0811 10.563 28.17 9.74904C27.2588 8.93507 26.8063 7.83864 26.8123 6.45975C26.8063 5.32991 27.1069 4.34282 27.7144 3.49847C28.3279 2.65413 29.1692 1.99506 30.2383 1.52125C31.3074 1.04745 32.5223 0.810547 33.883 0.810547C35.2679 0.810547 36.4767 1.04745 37.5094 1.52125C38.5481 1.99506 39.356 2.65413 39.9331 3.49847C40.5101 4.34282 40.8078 5.3208 40.826 6.43242H37.0447Z"
+          fill="currentColor"
+        />
+        <path
+          d="M0.00022876 9.28179C-0.00800652 7.69792 0.206109 6.40166 0.642574 5.39299C1.08728 4.38432 1.71315 3.63823 2.5202 3.15474C3.32725 2.66291 4.26606 2.41699 5.33664 2.41699C6.1684 2.41699 6.91368 2.57121 7.5725 2.87965C8.23955 3.18808 8.98072 3.67992 9.79601 4.35514C10.3313 4.79696 10.7883 5.11373 11.1672 5.30546C11.546 5.49719 11.9289 5.59305 12.316 5.59305C12.9419 5.59305 13.4277 5.35547 13.7736 4.88032C14.1277 4.40516 14.3007 3.71743 14.2924 2.81713H18.3194C18.3359 4.35097 18.1177 5.63473 17.6647 6.66841C17.2118 7.69376 16.5736 8.46902 15.7501 8.99419C14.9348 9.51103 13.9836 9.76945 12.8966 9.76945C12.1225 9.76945 11.3895 9.6194 10.6978 9.3193C10.0142 9.0192 9.22366 8.50236 8.32602 7.76878C7.7825 7.3353 7.3625 7.03937 7.06603 6.88099C6.76957 6.7226 6.42781 6.64341 6.04075 6.64341C5.41488 6.64341 4.92488 6.85598 4.57077 7.28112C4.21665 7.69792 4.0396 8.36481 4.0396 9.28179H0.00022876ZM0.00022876 18.0943C-0.00800652 16.5104 0.206109 15.2142 0.642574 14.2055C1.08728 13.1968 1.71315 12.4508 2.5202 11.9673C3.32725 11.4754 4.26606 11.2295 5.33664 11.2295C6.1684 11.2295 6.91368 11.3837 7.5725 11.6922C8.23955 12.0006 8.98072 12.4924 9.79601 13.1677C10.3313 13.6095 10.7883 13.9262 11.1672 14.118C11.546 14.3097 11.9289 14.4056 12.316 14.4056C12.9419 14.4056 13.4277 14.168 13.7736 13.6928C14.1277 13.2177 14.3007 12.53 14.2924 11.6296H18.3194C18.3359 13.1635 18.1177 14.4473 17.6647 15.4809C17.2118 16.5063 16.5736 17.2815 15.7501 17.8067C14.9348 18.3236 13.9836 18.582 12.8966 18.582C12.1225 18.582 11.3895 18.4319 10.6978 18.1318C10.0142 17.8317 9.22366 17.3149 8.32602 16.5813C7.7825 16.1478 7.3625 15.8519 7.06603 15.6935C6.76957 15.5351 6.42781 15.4559 6.04075 15.4559C5.41488 15.4559 4.92488 15.6685 4.57077 16.0936C4.21665 16.5104 4.0396 17.1773 4.0396 18.0943H0.00022876Z"
+          fill="currentColor"
+        />
+      </svg>
     </span>
   ),
   project: {