diff --git a/packages/next-docs/components/mode/index.ts b/packages/next-docs/components/mode/index.ts new file mode 100644 index 0000000000..041eaa6069 --- /dev/null +++ b/packages/next-docs/components/mode/index.ts @@ -0,0 +1 @@ +export * from './mode' diff --git a/packages/next-docs/components/mode/mode.tsx b/packages/next-docs/components/mode/mode.tsx new file mode 100644 index 0000000000..6fb43cfae4 --- /dev/null +++ b/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 +} diff --git a/packages/next-docs/components/no-ssr/index.ts b/packages/next-docs/components/no-ssr/index.ts new file mode 100644 index 0000000000..5ed3362096 --- /dev/null +++ b/packages/next-docs/components/no-ssr/index.ts @@ -0,0 +1 @@ +export * from './no-ssr' diff --git a/packages/next-docs/components/no-ssr/no-ssr.tsx b/packages/next-docs/components/no-ssr/no-ssr.tsx new file mode 100644 index 0000000000..c742b58b97 --- /dev/null +++ b/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 +} diff --git a/packages/next-docs/pages/index.mdx b/packages/next-docs/pages/index.mdx index 8807005cf0..3e347f9abf 100644 --- a/packages/next-docs/pages/index.mdx +++ b/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' -
-
- shoreline logo +
+
+ }> + + shoreline logo + + + shoreline logo + +
-

Build great experiences for merchants in the VTEX Admin.

-

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.

+

Build great experiences for merchants in the VTEX Admin

+

+ 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 +

-
-
- -
-
- feature foundations -
-

Foundations

-

Fundamental design guidance for creating quality admin experiences

-
-
-
- feature components -
-

Components

-

Reusable elements and styles, packaged through code, for building admin interfaces

-
-
-
- feature raccoon -
-

Raccoon

-

Coded names that represent design decisions for color, spacing, typography, and more

-
-
-
- feature api -
-

API Reference

-

Over 400 carefully designed icons focused on commerce and entrepreneurship

-
-
+
+ +
+ +
\ No newline at end of file diff --git a/packages/next-docs/pages/index.module.css b/packages/next-docs/pages/index.module.css index d542caef56..3e8955cf5b 100644 --- a/packages/next-docs/pages/index.module.css +++ b/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; + } } diff --git a/packages/next-docs/public/assets/landing-api-reference.png b/packages/next-docs/public/assets/landing-api-reference.png new file mode 100644 index 0000000000..edfa8916e7 Binary files /dev/null and b/packages/next-docs/public/assets/landing-api-reference.png differ diff --git a/packages/next-docs/public/assets/landing-code.png b/packages/next-docs/public/assets/landing-code.png deleted file mode 100644 index a2258931ab..0000000000 Binary files a/packages/next-docs/public/assets/landing-code.png and /dev/null differ diff --git a/packages/next-docs/public/assets/landing-components.png b/packages/next-docs/public/assets/landing-components.png index 9f013ee253..84c73f6b96 100644 Binary files a/packages/next-docs/public/assets/landing-components.png and b/packages/next-docs/public/assets/landing-components.png differ diff --git a/packages/next-docs/public/assets/landing-foundations.png b/packages/next-docs/public/assets/landing-foundations.png index 2e95f45d8a..3980376fba 100644 Binary files a/packages/next-docs/public/assets/landing-foundations.png and b/packages/next-docs/public/assets/landing-foundations.png differ diff --git a/packages/next-docs/public/assets/landing-logo-dark.png b/packages/next-docs/public/assets/landing-logo-dark.png new file mode 100644 index 0000000000..00fa7b941d Binary files /dev/null and b/packages/next-docs/public/assets/landing-logo-dark.png differ diff --git a/packages/next-docs/public/assets/landing-logo.png b/packages/next-docs/public/assets/landing-logo.png new file mode 100644 index 0000000000..d7283622b0 Binary files /dev/null and b/packages/next-docs/public/assets/landing-logo.png differ diff --git a/packages/next-docs/public/assets/landing-raccoon.png b/packages/next-docs/public/assets/landing-raccoon.png index f665387012..ada2feee6f 100644 Binary files a/packages/next-docs/public/assets/landing-raccoon.png and b/packages/next-docs/public/assets/landing-raccoon.png differ diff --git a/packages/next-docs/public/assets/landing-shoreline-logo.png b/packages/next-docs/public/assets/landing-shoreline-logo.png deleted file mode 100644 index 80d7ba9f5d..0000000000 Binary files a/packages/next-docs/public/assets/landing-shoreline-logo.png and /dev/null differ diff --git a/packages/next-docs/theme.config.tsx b/packages/next-docs/theme.config.tsx index 651842a922..2014b27b98 100644 --- a/packages/next-docs/theme.config.tsx +++ b/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: ( - - ≈ - - Shoreline + + + + + + + + + + + ), project: {