feat(tutorial): complete step 2

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;

src/app/globals.scss

@@ -1,11 +1,11 @@
 @use '@carbon/react';
+@use '@carbon/react/scss/breakpoint' as *;
 
 @use '@/components/TutorialHeader/tutorial-header';
 
 @use '@/app/home/landing-page';
 @use '@/app/repos/repo-page';
 
-
 /// Remove overrides once Carbon bugs are fixed upstream.
 /// Need grid option to not add page gutters at large viewports, to also use when nesting grids
 /// @link https://github.com/carbon-design-system/carbon/issues/2792
@@ -20,5 +20,14 @@
 /// @link https://github.com/carbon-design-system/carbon/issues/3010
 .cds--content {
   margin-top: 3rem;
+  padding: 0;
   background: var(--cds-background);
-}
+}
+
+.cds--content .cds--css-grid {
+  max-width: 100%;
+  @include breakpoint(md) {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}

src/app/home/_landing-page.scss

@@ -0,0 +1,106 @@
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/type' as *;
+@use '@carbon/react/scss/breakpoint' as *;
+@use '@carbon/react/scss/theme' as *;
+@use './mixins.scss' as *;
+@use './overrides.scss';
+
+html {
+  background-color: $layer-01;
+}
+
+.landing-page__illo {
+  max-width: 100%;
+  float: inline-end;
+  height: auto;
+}
+
+.landing-page__banner {
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-07 * 4;
+  padding-left: $spacing-06;
+  @include landing-page-background;
+}
+
+.landing-page__heading {
+  @include type-style('productive-heading-05');
+}
+
+.landing-page__r2 {
+  margin-top: rem(-40px);
+}
+
+.tabs-group-content {
+  padding: $spacing-10 0 $spacing-10 $spacing-06;
+}
+
+.landing-page__subheading {
+  @include type-style('productive-heading-03');
+
+  font-weight: 600;
+}
+
+.landing-page__p {
+  @include type-style('productive-heading-03');
+  margin-top: $spacing-06;
+  margin-bottom: $spacing-08;
+
+  @include breakpoint-between((320px + 1), md) {
+    max-width: 75%;
+  }
+}
+
+.tabs-group {
+  background-color: $layer-01;
+  padding: 0 $spacing-03;
+}
+
+.landing-page__r3 {
+  padding-top: $spacing-08;
+  padding-bottom: $spacing-08;
+  padding-left: $spacing-06;
+  @include landing-page-background;
+}
+
+.landing-page__label {
+  @include type-style('heading-01');
+
+  @include breakpoint-down(md) {
+    padding-bottom: 1.5rem;
+  }
+}
+
+.landing-page__title {
+  padding-bottom: 0.5rem;
+}
+
+.landing-page__banner,
+.landing-page__r2,
+.landing-page__r3 {
+  margin-left: -20px;
+  margin-right: -20px;
+
+  @include breakpoint-down(md) {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+@media (max-width: 672px) {
+  .landing-page__illo {
+    width: 528px;
+    width: 100%;
+    height: auto;
+    float: inline-start;
+  }
+}
+
+@media (max-width: 320px) {
+  .landing-page__illo {
+    display: none;
+  }
+
+  .landing-page__banner {
+    padding-bottom: $spacing-05 * 4;
+  }
+}

src/app/home/_mixins.scss

@@ -0,0 +1,7 @@
+@use '@carbon/react/scss/spacing' as *;
+@use '@carbon/react/scss/theme' as *;
+
+@mixin landing-page-background() {
+  background-color: $layer-01;
+  position: relative;
+}

src/app/home/_overrides.scss

@@ -0,0 +1,18 @@
+.landing-page__r2 .cds--tabs--scrollable {
+  transform: translateZ(0);
+  justify-content: flex-end;
+}
+
+.landing-page__r2 .cds--tab-content {
+  padding: 0;
+}
+
+.cds--tab--list {
+  justify-content: flex-end;
+  padding-right: 1rem;
+}
+
+.cds--subgrid--wide {
+  //fix needed to keep the subgrid from scrolling horizontally
+  margin-right: 1rem;
+}

src/app/home/page.js

@@ -1,8 +1,139 @@
-`use client`
+'use client';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  Tabs,
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  Grid,
+  Column,
+} from '@carbon/react';
 
-export default function LandingPage() {
-    return (
-        <div>LANDING PAGE</div>
-    );
-};
+import Image from 'next/image';
+
+<Column md={4} lg={{ span: 8, offset: 7 }} sm={4}>
+  <Image
+    className="landing-page__illo"
+    src="/tab-illo.png"
+    alt="Carbon illustration"
+    width={604}
+    height={498}
+  />
+</Column>;
 
+export default function LandingPage() {
+  return (
+    <Grid className="landing-page" fullWidth>
+      <Column lg={16} md={8} sm={4} className="landing-page__banner">
+        <Column lg={16} md={8} sm={4} className="landing-page__banner">
+          <Breadcrumb noTrailingSlash aria-label="Page navigation">
+            <BreadcrumbItem>
+              <a href="/">Getting started</a>
+            </BreadcrumbItem>
+          </Breadcrumb>
+          <h1 className="landing-page__heading">
+            Design &amp; build with Carbon
+          </h1>
+        </Column>
+      </Column>
+      <Column lg={16} md={8} sm={4} className="landing-page__r2">
+        <Tabs defaultSelectedIndex={0}>
+          <TabList className="tabs-group" aria-label="Tab navigation">
+            <Tab>About</Tab>
+            <Tab>Design</Tab>
+            <Tab>Develop</Tab>
+          </TabList>
+          <TabPanels>
+            <TabPanel>
+              <Grid className="tabs-group-content">
+                <Column
+                  md={4}
+                  lg={7}
+                  sm={4}
+                  className="landing-page__tab-content"
+                >
+                  <h3 className="landing-page__subheading">What is Carbon?</h3>
+                  <p className="landing-page__p">
+                    Carbon is IBM’s open-source design system for digital
+                    products and experiences. With the IBM Design Language as
+                    its foundation, the system consists of working code, design
+                    tools and resources, human interface guidelines, and a
+                    vibrant community of contributors.
+                  </p>
+                  <Button>Learn more</Button>
+                </Column>
+                <Column md={4} lg={{ span: 8, offset: 7 }} sm={4}>
+                  IMAGE WILL GO HERE
+                </Column>
+              </Grid>
+            </TabPanel>
+            <TabPanel>
+              <Grid className="tabs-group-content">
+                <Column
+                  lg={16}
+                  md={8}
+                  sm={4}
+                  className="landing-page__tab-content"
+                >
+                  <p className="landing-page__p">
+                    Rapidly build beautiful and accessible experiences. The
+                    Carbon kit contains all resources you need to get started.
+                  </p>
+                </Column>
+              </Grid>
+            </TabPanel>
+            <TabPanel>
+              <Grid className="tabs-group-content">
+                <Column
+                  lg={16}
+                  md={8}
+                  sm={4}
+                  className="landing-page__tab-content"
+                >
+                  <p className="landing-page__p">
+                    Carbon provides styles and components in Vanilla, React,
+                    Angular, and Vue for anyone building on the web.
+                  </p>
+                </Column>
+              </Grid>
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Column>
+      <Column lg={16} md={8} sm={4} className="landing-page__r3">
+        <Grid>
+          <Column lg={4} md={2} sm={4}>
+            <h3 className="landing-page__label">The Principles</h3>
+          </Column>
+          <Column
+            lg={{ start: 5, span: 3 }}
+            md={{ start: 3, span: 6 }}
+            sm={4}
+            className="landing-page__title"
+          >
+            Carbon is Open
+          </Column>
+          <Column
+            lg={{ start: 9, span: 3 }}
+            md={{ start: 3, span: 6 }}
+            sm={4}
+            className="landing-page__title"
+          >
+            Carbon is Modular
+          </Column>
+          <Column
+            lg={{ start: 13, span: 3 }}
+            md={{ start: 3, span: 6 }}
+            sm={4}
+            className="landing-page__title"
+          >
+            Carbon is Consistent
+          </Column>
+        </Grid>
+      </Column>
+    </Grid>
+  );
+}

src/app/layout.js

@@ -1,19 +1,17 @@
-import './globals.scss'
+import './globals.scss';
 import { Providers } from './providers';
 
 export const metadata = {
   title: 'Carbon + Next13',
   description: 'IBM Carbon Tutorial with NextJS 13',
-}
+};
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body>
-        <Providers>
-          {children}
-        </Providers>
+        <Providers>{children}</Providers>
       </body>
     </html>
-  )
+  );
 }

src/app/page.js

@@ -1,5 +1,5 @@
 import LandingPage from './home/page';
 
 export default function Page() {
-    return <LandingPage />;
-  }
+  return <LandingPage />;
+}

src/app/providers.js

@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import { Content, Theme } from '@carbon/react';
 
@@ -7,12 +7,10 @@ import TutorialHeader from '@/components/TutorialHeader/TutorialHeader';
 export function Providers({ children }) {
   return (
     <div>
-        <Theme theme="g100">
-          <TutorialHeader />
-        </Theme>
-        <Content>
-          {children}
-        </Content>
+      <Theme theme="g100">
+        <TutorialHeader />
+      </Theme>
+      <Content>{children}</Content>
     </div>
-  )
+  );
 }