refactor: update card design

logto-io · Dec 27, 2024 · 3f0c220 · 3f0c220
1 parent 8a30646
commit 3f0c220
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -1,6 +1,8 @@
 ---
 import { defaultLocale } from "astro-i18n-aut";
 import type { CollectionEntry } from "astro:content";
+import { getLocaleFromUrl } from "../utils/locale";
+import { getPhrases } from "../phrases";
 
 type Props = {
   entry: CollectionEntry<"terms">;
@@ -13,6 +15,8 @@ const {
 const slug = rawSlug.startsWith(`${defaultLocale}/`)
   ? rawSlug.slice(defaultLocale.length + 1)
   : rawSlug;
+const locale = getLocaleFromUrl(Astro.url);
+const phrases = getPhrases(locale);
 ---
 
 <section>
@@ -22,6 +26,10 @@ const slug = rawSlug.startsWith(`${defaultLocale}/`)
   <p>
     {description}
   </p>
+  <hr />
+  <a aria-hidden="true" class="call-to-action" href={`/${slug}`}>
+    {phrases.general.learn_more}
+  </a>
 </section>
 
 <style>
@@ -61,10 +69,22 @@ const slug = rawSlug.startsWith(`${defaultLocale}/`)
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+  hr {
+    margin-block: 4px;
+    border: none;
+    height: 1px;
+    width: 100%;
+    background-color: #e5e1ec;
+  }
   a {
     color: var(--color-text);
     text-decoration: none;
   }
+  a.call-to-action {
+    color: #ad4ffc;
+    font-size: 16px;
+    font-weight: 500;
+  }
   a:hover {
     color: #ad4ffc;
     text-decoration: underline;
@@ -91,6 +111,7 @@ const slug = rawSlug.startsWith(`${defaultLocale}/`)
     hr {
       background-color: rgba(255, 255, 255, 0.08);
     }
+    a.call-to-action,
     a:hover {
       color: var(--color-link);
     }