fix(landing): styles & content

goulvenclech · May 1, 2024 · 8559523 · 8559523
1 parent fa9972b
commit 8559523
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 56 deletions.
diff --git a/.changeset/pink-bees-add.md b/.changeset/pink-bees-add.md
@@ -0,0 +1,5 @@
+---
+"@goulvenclech/astropi": minor
+---
+
+Fix landing styles & content.
diff --git a/packages/astropi/assets/app.css b/packages/astropi/assets/app.css
@@ -68,7 +68,7 @@
     padding: 0.25rem 0.5rem;
     gap: 0.25rem;
     align-items: center;
-    border-radius: 0.25rem;
+    border-radius: 0.5rem;
     border: 1px solid var(--color-neutral);
     text-align: center;
     text-decoration: none;
@@ -92,7 +92,7 @@
     flex-direction: column;
     gap: 0.5rem;
     border: 1px solid var(--color-lighter);
-    border-radius: 0.25rem;
+    border-radius: 0.5rem;
     background-color: var(--color-lighter);
     text-decoration-line: none;
     cursor: pointer;
@@ -111,12 +111,10 @@
     color: var(--color-primary);
   }
 
-  .card-alt:hover {
-    border-color: var(--color-secondary);
-  }
-
-  .card-alt:hover h3 {
-    color: var(--color-secondary);
+  .card p,
+  .card h3 {
+    text-decoration-line: none;
+    margin: 0;
   }
   /**
     * LINKS (and links before/after)

diff --git a/packages/astropi/components/InfoBanner.astro b/packages/astropi/components/InfoBanner.astro
@@ -0,0 +1,24 @@
+---
+
+---
+
+<a href="https://github.com/goulvenclech/astropi">
+  <div class="info-banner">
+    <p>
+      📣 Astropi is in early development and features bellow are not yet
+      implemented... but new contributors are welcome!
+    </p>
+  </div>
+</a>
+<style>
+  .info-banner {
+    border: 1px solid;
+    padding: 0 1rem;
+    border-radius: 0.5rem;
+    margin-top: 0.75rem;
+  }
+  .info-banner:hover {
+    border-color: var(--color-primary);
+    color: var(--color-primary);
+  }
+</style>
diff --git a/packages/astropi/components/Logo.astro b/packages/astropi/components/Logo.astro
@@ -10,7 +10,7 @@
     a.logo {
       font-weight: 700;
       text-decoration-line: none;
-      margin-right: 0.5rem;
+      margin-right: 0.25rem;
     }
     a.logo:hover {
       color: var(--color-primary);

diff --git a/packages/astropi/components/cards/BlogEntryCard.astro b/packages/astropi/components/cards/BlogEntryCard.astro
@@ -9,7 +9,7 @@ const { archetype, entry } = Astro.props
 <a href={archetype?.path + "/" + entry.slug}>
   <article class="card blog-entries-card">
     <div class="blog-entries-header">
-      <h3 class="blog-entries-card-title">{entry.data.title}</h3>
+      <h3>{entry.data.title}</h3>
       <p>
         {
           entry.data.date.toLocaleString("en-GB", {
@@ -24,12 +24,6 @@ const { archetype, entry } = Astro.props
   </article>
 </a>
 <style>
-  .blog-entries-card p,
-  .blog-entries-card h3 {
-    text-decoration-line: none;
-    margin: 0;
-  }
-
   .blog-entries-card {
     padding: 1rem;
   }
@@ -38,7 +32,4 @@ const { archetype, entry } = Astro.props
     display: flex;
     justify-content: space-between;
   }
-
-  .blog-entries-card-title {
-  }
 </style>
diff --git a/packages/astropi/components/header/HeaderNavLink.astro b/packages/astropi/components/header/HeaderNavLink.astro
@@ -21,7 +21,7 @@ const { url, is_current = false } = Astro.props
       padding: 0.25rem 0.5rem;
       gap: 0.25rem;
       align-items: center;
-      border-radius: 0.25rem;
+      border-radius: 0.5rem;
       border: 1px solid transparent;
       text-decoration-line: none;
     }

diff --git a/packages/astropi/components/header/HeaderNavSearchButton.astro b/packages/astropi/components/header/HeaderNavSearchButton.astro
@@ -17,7 +17,7 @@ import SearchIcon from "../icons/SearchIcon.astro"
       flex-grow: 1;
       gap: 0.25rem;
       align-items: center;
-      border-radius: 0.25rem;
+      border-radius: 0.5rem;
       border: 1px solid transparent;
       background-color: var(--color-lighter);
     }

diff --git a/packages/astropi/layouts/Header.astro b/packages/astropi/layouts/Header.astro
@@ -31,6 +31,9 @@ const isCurrentPage = (path: string) => {
     ))
   }
   <HeaderNavSearchButton />
+  <HeaderNavLink url="https://github.com/goulvenclech/astropi">
+    Join on Github!
+  </HeaderNavLink>
   <DarkMode />
 </nav>
 <style is:global>

diff --git a/packages/astropi/layouts/landing/LandingFeatures.astro b/packages/astropi/layouts/landing/LandingFeatures.astro
@@ -1,38 +1,54 @@
 ---
+import InfoBanner from "../../components/InfoBanner.astro"
 /**
- * WIP
+ * Display a grid of features in the landing page.
  */
 ---
 
-<section class="my-18">
-  <h2 class="text-xl font-bold">Features</h2>
+<section>
+  <h2>Why Astropi?</h2>
+  <InfoBanner />
   <div class="landing-features-grid">
-    <article class="card">
-      <h3 class="font-semibold">Beautiful and accesible</h3>
-      <p>
-        We provide a beautiful and accesible design for your API documentation.
-      </p>
-    </article>
-    <article class="card card-alt">
-      <h3 class="font-semibold">Powered by Astro</h3>
-      <p>
-        Astro is a modern static site generator that help us to build fast and
-        modern websites.
-      </p>
-    </article>
-    <article class="card card-alt">
-      <h3 class="font-semibold">Powered by Astro</h3>
-      <p>
-        Astro is a modern static site generator that help us to build fast and
-        modern websites.
-      </p>
-    </article>
-    <article class="card">
-      <h3 class="font-semibold">Beautiful and accesible</h3>
-      <p>
-        We provide a beautiful and accesible design for your API documentation.
-      </p>
-    </article>
+    <a href="/">
+      <article class="card landing-features-card">
+        <h3>Beautiful and accesible</h3>
+        <p>
+          With accesible navigation, search bar, internationalization, SEO,
+          easy-to-read typography, code highlighting, dark mode... Astropi let
+          you focus on your content.
+        </p>
+      </article>
+    </a>
+    <a href="/">
+      <article class="card landing-features-card">
+        <h3>More with less</h3>
+        <p>
+          With minimal configuration, add a blog or an API playground to your
+          documentation. Our pre-built Archetypes and components can grow with
+          your project.
+        </p>
+      </article>
+    </a>
+    <a href="/">
+      <article class="card landing-features-card">
+        <h3>Powered by Astro</h3>
+        <p>
+          Astro is a modern static site generator that help us to build fast and
+          modern websites. Extend Astropi with your favorite Astro components,
+          integrations and libraries.
+        </p>
+      </article>
+    </a>
+    <a href="/">
+      <article class="card landing-features-card">
+        <h3>Framework-agnostic</h3>
+        <p>
+          Thanks to Astro, you can bring your favorite components from React,
+          Vue, Svelte, Solid, and more. And write your content in Markdown,
+          Markdoc, or MDX.
+        </p>
+      </article>
+    </a>
   </div>
 
   <style is:global>
@@ -43,12 +59,10 @@
         grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: 0.75rem;
       }
-    }
-    article {
-      @apply p-3 border border-neutral-500 rounded;
-    }
-    article:hover {
-      @apply border-rose-600;
+
+      .landing-features-card {
+        padding: 1rem;
+      }
     }
   </style>
 </section>