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'
-
-
-
+
+
+ }>
+
+
+
+
+
+
+
-
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
+
-
-
-
-
-
-
-
-
Foundations
-
Fundamental design guidance for creating quality admin experiences
-
-
-
-
-
-
Components
-
Reusable elements and styles, packaged through code, for building admin interfaces
-
-
-
-
-
-
Raccoon
-
Coded names that represent design decisions for color, spacing, typography, and more
-
-
-
-
-
-
API Reference
-
Over 400 carefully designed icons focused on commerce and entrepreneurship
-
-
+
+
+
+
+
+
+
+
+
+
+
+
Foundations
+
Fundamental design guidance for creating quality admin experiences
+
+
+
+
+
+
+
+
+
+
+
+
Components
+
Reusable elements and styles, packaged through code, for building admin interfaces
+
+
+
+
+
+
+
+
+
+
+
+
Raccoon
+
Coded names that represent design decisions for color, spacing, typography, and more
+
+
+
+
+
+
+
+
+
+
+
+
API Reference
+
Over 400 carefully designed icons focused on commerce and entrepreneurship