scale back the examples page

1 files changed, 45 insertions, 0 deletions

diff --git a/docs/src/pages/themes.astro b/docs/src/pages/themes.astro
new file mode 100644
index 000000000..c4eea3067
--- /dev/null
+++ b/docs/src/pages/themes.astro
@@ -0,0 +1,45 @@
+---
+import Layout from '../layouts/MainLayout.astro';
+import Card from '../components/Examples/Card.astro';
+import {Markdown} from 'astro/components';
+import themes from '../data/themes.json';
+import components from '../data/components.json';
+---
+<style>
+    .card-grid {
+        display: grid;
+        grid-column-gap: 15px;
+        grid-row-gap: 15px;
+        grid-auto-flow: dense;
+        grid-template-columns: repeat(auto-fit,minmax(300px,1fr))
+    }
+</style>
+<Layout content={{title: 'Themes'}} hideRightSidebar>
+    <Markdown>
+        ## Featured Themes
+
+        Astro is supported by a growing ecosystem of third-pary themes and components.
+    </Markdown>
+    <div class="card-grid">
+    
+        {themes.community.map((item)=>(<Card data={item} />))}
+    </div>
+    <Markdown>
+        ## Official Themes
+
+        Astro maintains several official themes for common use-cases like documentation, portfolios, and more.
+    </Markdown>
+    <div class="card-grid">
+    
+        {themes.official.map((item)=>(<Card data={item} />))}
+    </div>
+    <Markdown>
+        ## Featured Packages
+        
+        Our package ecosystem is growing! Check out these featured community packages.
+    </Markdown>
+    <div class="card-grid">
+    
+        {components.community.map((item)=>(<Card data={item} />))}
+    </div>
+</Layout>
\ No newline at end of file