homepage + sidebar + footer

Author: claudiacodacy

docusaurus/docusaurus.config.ts

@@ -48,7 +48,7 @@ const config: Config = {
       'classic',
       {
         docs: {
-          routeBasePath: '/',
+          routeBasePath: '/docs',
           sidebarPath: './sidebars.ts',
           breadcrumbs: false,
         },
@@ -115,13 +115,13 @@ const config: Config = {
       darkTheme: prismThemes.dracula,
     },
     footer: {
-      style: 'dark',
+      style: 'light',
       links: [
         {
           title: 'Docs',
           items: [
-            {label: 'Documentation', to: '/'},
-            {label: 'Release notes', to: '/release-notes/'},
+            {label: 'Documentation', to: '/docs/'},
+            {label: 'Release notes', to: '/docs/release-notes/'},
           ],
         },
         {

docusaurus/src/components/ContentFooter/index.tsx

@@ -14,8 +14,7 @@
 @import './imports/components/navbar.css';
 @import './imports/components/nav-multistep.css';
 @import './imports/components/main-section.css';
-
-@layer docusaurus.infima, docusaurus.custom;
+@import './imports/components/footer.css';
 
 .table-of-contents__left-border {
   border: none;

docusaurus/src/components/ContentFooter/styles.module.css

@@ -0,0 +1,18 @@
+.theme-layout-footer.footer {
+    margin: 1rem;
+    border-radius: 1rem;
+    --ifm-footer-background-color: var(--ifm-color-emphasis-300)
+}
+
+[data-theme='dark'] {
+    .theme-layout-footer.footer {
+        --ifm-footer-background-color: var(--ifm-color-emphasis-100)
+    }
+    
+}
+
+@media (min-width: 997px) {
+    .theme-layout-footer.footer {
+        margin: 2rem;
+    }
+}

docusaurus/src/css/custom.css

@@ -48,9 +48,7 @@
 @layer docusaurus.infima {
     @media (min-width: 997px) {
         .theme-layout-main .container {
-            padding-top: 4rem !important;
-            padding-left: 4rem;
-            padding-right: 4rem;
+            padding: 4rem;
         }
     }
 }

docusaurus/src/css/imports/components/footer.css

@@ -1,23 +1,87 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
+.homepage {
+  padding-bottom: 6rem;
+}
 
-.heroBanner {
-  padding: 4rem 0;
-  text-align: center;
-  position: relative;
-  overflow: hidden;
+.hero {
+  padding: 5rem 0 4rem;
+  background: linear-gradient(140deg, #f6f7fb 0%, #f0f6f3 60%, #e9f2ef 100%);
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.heroInner {
+  margin: 0 auto;
+  max-width: 960px;
+  padding: 0 1.5rem;
+  text-align: left;
+}
+
+.kicker {
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  font-size: 0.75rem;
+  margin: 0 0 0.75rem;
+  color: #5b6775;
+}
+
+.title {
+  font-size: clamp(2.2rem, 2.8vw + 1.5rem, 3.6rem);
+  line-height: 1.05;
+  margin: 0 0 1rem;
 }
 
-.buttons {
+.subtitle {
+  font-size: 1.125rem;
+  max-width: 40rem;
+  margin: 0 0 2rem;
+  color: #3b4654;
+}
+
+.ctaRow {
   display: flex;
-  align-items: center;
-  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.primaryCta,
+.secondaryCta {
+  border-radius: 999px;
+  padding: 0.75rem 1.6rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.primaryCta {
+  background: #0d1726;
+  color: #ffffff;
+}
+
+.secondaryCta {
+  border: 1px solid #0d1726;
+  color: #0d1726;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1.5rem;
+  margin: 3.5rem auto 0;
+  max-width: 1000px;
+  padding: 0 1.5rem;
+}
+
+.card {
+  background: #ffffff;
+  border: 1px solid #e1e5ea;
+  border-radius: 1.25rem;
+  padding: 1.75rem;
+  box-shadow: 0 10px 30px rgba(13, 23, 38, 0.08);
+}
+
+.card h2 {
+  margin-top: 0;
+}
+
+@media (max-width: 700px) {
+  .hero {
+    padding: 3rem 0 2.5rem;
+  }
 }

docusaurus/src/css/imports/components/main-section.css

@@ -0,0 +1,49 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+
+import styles from './index.module.css';
+
+export default function Home(): React.JSX.Element {
+  return (
+    <Layout title="Home" description="Codacy Docs homepage">
+      <main className={styles.homepage}>
+        <section className={styles.hero}>
+          <div className={styles.heroInner}>
+            <p className={styles.kicker}>Codacy Docs</p>
+            <h1 className={styles.title}>Documentation that ships fast</h1>
+            <p className={styles.subtitle}>
+              Practical guides, API references, and release notes for Codacy.
+            </p>
+            <div className={styles.ctaRow}>
+              <Link className={styles.primaryCta} to="/docs/">
+                Explore docs
+              </Link>
+              <Link className={styles.secondaryCta} to="/docs/release-notes/">
+                Release notes
+              </Link>
+            </div>
+          </div>
+        </section>
+
+        <section className={styles.grid}>
+          <article className={styles.card}>
+            <h2>Get started</h2>
+            <p>Install, configure, and ship with confidence.</p>
+            <Link to="/docs/getting-started/">Start here</Link>
+          </article>
+          <article className={styles.card}>
+            <h2>API guides</h2>
+            <p>Automate workflows with Codacy APIs.</p>
+            <Link to="/docs/codacy-api/">Browse API docs</Link>
+          </article>
+          <article className={styles.card}>
+            <h2>Integrations</h2>
+            <p>Connect Codacy with your CI and SCM tools.</p>
+            <Link to="/docs/repositories-configure/">See integrations</Link>
+          </article>
+        </section>
+      </main>
+    </Layout>
+  );
+}

docusaurus/src/pages/index.module.css

@@ -2,15 +2,12 @@ import React from 'react';
 import DocItemLayout from '@theme-original/DocItem/Layout';
 import type {Props} from '@theme/DocItem/Layout';
 
-import ContentFooter from '@site/src/components/ContentFooter';
-
 export default function DocItemLayoutWrapper(
   props: Props,
 ): React.JSX.Element {
   return (
     <>
       <DocItemLayout {...props} />
-      <ContentFooter />
     </>
   );
 }