5 files changed, 77 insertions, 9 deletions
diff --git a/docs/src/pages/demo.astro b/docs/src/pages/demo.astro
new file mode 100644
index 000000000..c60a9e05d
--- /dev/null
+++ b/docs/src/pages/demo.astro
@@ -0,0 +1,14 @@
+---
+import Layout from '../layouts/ExamplesLayout.astro'
+import templateData from '../components/Examples/function-generate-examples-data.js'
+import Card from '../components/Examples/Card.astro'
+
+let data = await templateData()
+
+---
+
+    <Layout content={data}>
+      {data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro')))
+                .sort((a,b)=> ((a.name === 'starter')? -1 : 1))
+                .map((item)=>(<Card data={item}/>))}
+    </Layout>
diff --git a/docs/src/pages/examples.md b/docs/src/pages/examples.md
deleted file mode 100644
index 17af0bb87..000000000
--- a/docs/src/pages/examples.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Examples
----
-
-If you prefer to learn by example, check out our [Examples Library](https://github.com/snowpackjs/astro/tree/main/examples) on GitHub.
-
-<!-- Once we merge astro-docs back into the main repo, we can actually fetch the list of examples at build-time by scanning the examples/ directory! -->
diff --git a/docs/src/pages/getting-started.md b/docs/src/pages/getting-started.md
index 73ac8e0d7..df8d43eef 100644
--- a/docs/src/pages/getting-started.md
+++ b/docs/src/pages/getting-started.md
@@ -15,6 +15,20 @@ To get started with Astro in 5 quick and easy steps, visit our [Quick-Start guid
 
 Alternatively, read our [Installation Guide](/installation) for a full walk-through on getting set up with Astro.
 
+### Example Projects
+
+If you prefer to learn Astro by example, check out our [complete library of examples](https://github.com/snowpackjs/astro/tree/main/examples) on GitHub.
+
+You can check out any of these examples on your local machine by running `npm init astro` with the `--template` CLI flag. The `--template` flag also supports third-party, community templates.
+
+```bash
+# Run the init wizard and use this official template
+npm init astro -- --template [OFFICIAL_EXAMPLE_NAME]
+# Run the init wizard and use this community template
+npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
+npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
+```
+
 ### Online Playgrounds
 
 If you're interested in playing around with Astro in the browser, you can use an online code playground. Try our "Hello World!" template on [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
diff --git a/docs/src/pages/quick-start.md b/docs/src/pages/quick-start.md
index c59a12a49..6998826fe 100644
--- a/docs/src/pages/quick-start.md
+++ b/docs/src/pages/quick-start.md
@@ -23,7 +23,10 @@ npm run dev
 npm run build
 ```
 
-If you wish to learn more about the range of methods to install and setup Astro for your project's, please [read our installation guide.](installation)
+To learn more about installing and using Astro for the first time, please [read our installation guide.](installation)
+
+If you prefer to learn by example, check out our [complete library of examples](https://github.com/snowpackjs/astro/tree/main/examples) on GitHub. You can check out any of these examples locally by running `npm init astro -- --template "EXAMPLE_NAME"`.
+
 
 ## Start your project
 
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