6 files changed, 63 insertions, 192 deletions
diff --git a/docs/src/pages/examples-and-templates.astro b/docs/src/pages/examples-and-templates.astro
deleted file mode 100644
index aff58a932..000000000
--- a/docs/src/pages/examples-and-templates.astro
+++ /dev/null
@@ -1,33 +0,0 @@
----
-
-import Layout from '../layouts/MainLayout.astro';
-import {Markdown} from 'astro/components'
-import Examples from '../components/Examples/Examples.astro'
-
-import Thumbnail from '../components/Examples/Thumbnail.astro'
-const githubEditUrl = "https://github.com/snowpackjs/astro/tree/main/docs/src/pages/examples-and-templates.astro"
-const title = 'Examples & Templates'
-
-
----
-
-<Layout content={{title:title,astro:{headers:examplesHeaders},page:'/examples-and-templates',githubEditUrl:githubEditUrl}}>
-    <Markdown>
-       
-        We encourage you to freely explore our collection of ready-made templates containing a multitude of examples on how to apply Astro to a variety of use-cases. i.e: various UI frameworks, State Management Tools, and of course TailwindCSS
-    </Markdown>
-    <!-- <Examples/> -->
-    <Thumbnail/>
-    <Markdown>
-        
-        ##  Community Templates
-        
-        Visit [Awesome-Astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples. You can use `npm init astro` to check out any of the community examples
-
-        ```bash
-        npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
-        npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
-        ```
-    </Markdown>
-
-</Layout>
diff --git a/docs/src/pages/examples.astro b/docs/src/pages/examples.astro
deleted file mode 100644
index 6128b2e20..000000000
--- a/docs/src/pages/examples.astro
+++ /dev/null
@@ -1,87 +0,0 @@
----
-import Layout from '../layouts/ExamplesLayout.astro'
-import Card from '../components/Examples/Card.astro'
-import {Markdown} from 'astro/components'
-import templateData from '../components/Examples/Functions/get-examples-data.js'
-let data = await templateData()
-let headers = {}
----
-<Layout content={data}>
-    <Markdown>
-       # Examples & Templates
-        We encourage you to freely explore our collection of ready-made templates containing a multitude of examples on how to apply Astro to a variety of use-cases. i.e: various UI frameworks, State Management Tools, and of course TailwindCSS.
-
-
-        To use any one of our templates simply instruct `create-astro`by using:
-
-        ```bash
-            npm init astro my-astro-project -- -- template [template]
-        ```
-    </Markdown>
-    <Markdown>
-        ## `create-astro` Templates
-        
-        Below is a list of Astro's templates that are available directly through the [`create-astro`](/installation) install wizard. 
-    </Markdown>
-    <div class="flexbox">
-        {data.filter(item=> (item.pkgJSON?.keywords?.includes('create-astro')))
-                .sort((a,b)=> ((a.name === 'starter')? -1 : 1))
-                .map((item)=>(<Card data={item}/>))}
-    </div>
-    <Markdown>
-        ## UI Frameworks 
-        
-        Astro is always growing its support for the vast plethora of UI frameworks that exist within the JavaScript ecosystem. Below are demonstrations on how UI frameworks work inside Astro
-    </Markdown>
-    <div class="flexbox">
-        {data.filter(item=> (item.pkgJSON?.keywords?.includes('framework')))
-                .sort((a,b)=> (b.name > a.name) ? 1 : -1)
-                .sort((a,b)=> ((a.name === 'framework-multiple') ? 0 : -1))
-                .map((item)=>(<Card data={item}/>))}
-    </div>
-    <Markdown>
-        ## Kitchen Sink
-        
-        Here is a further set of examples that have been created by our developer team, to help our users with working examples on using Markdown with Astro. Support for plugins such as Nanostores and TailwindCSS
-    </Markdown>
-    <div class="flexbox">
-        {data.filter(item=> (item.pkgJSON?.keywords?.includes('kitchen-sink')))
-                .map((item)=>(<Card data={item}/>))}
-    </div>
-    <Markdown>
-        
-        ##  Community Templates
-        
-        Visit [Awesome-Astro](https://github.com/one-aalam/awesome-astro) for a full list of community examples.
-        
-        You can use `npm init astro` to pull down and utilise any of the wonderful community examples
-    </Markdown>
-    <Markdown >
-
-        ```bash
-        npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
-        npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
-        ```
-    </Markdown>
-</Layout>
-<style lang="scss">
-    .flexbox{
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: row;
-        align-content: center;
-        justify-content: space-evenly;
-        align-items: center;
-        gap: 2rem;
-        margin-top:1.25rem;
-        scroll-behavior: smooth;
-        padding: 2 rem;
-        
-    }
-    .markdown{
-        padding:2%;
-        line-height: 1.25rem;
-    }
-
-
-</style>
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/templates/[name].astro b/docs/src/pages/templates/[name].astro
deleted file mode 100644
index 7ad18b6c3..000000000
--- a/docs/src/pages/templates/[name].astro
+++ /dev/null
@@ -1,71 +0,0 @@
----
-import templateData from '../../components/Examples/Functions/get-examples-data.js'
-export async function getStaticPaths() {
-  const data = await templateData()
-  return data.map((example)=>({
-    params:{
-      name: example.name
-    },
-      props:{
-        example
-      }
-  }));
-}
-const {name} = Astro.request.params
-const {example} = Astro.props
-let {name:title,pkgJSON,readme=""} = example
-const {description, keywords} = pkgJSON
-
-import Layout from '../../layouts/ExamplesLayout.astro'
-import capitalise from '../../components/Examples/Functions/capitalise.js'
-import formatName from '../../components/Examples/Functions/format-name.js'
-import {Markdown} from 'astro/components'
-import CollapsibleReadme from '../../components/Examples/CollapsibleReadme.astro'
-import getHeroImg from '../../components/Examples/Functions/get-hero-img.js'
-const getImg = await getHeroImg()
-
-let templateTitle = formatName(title)
----
-<Layout>
-    <div class="imgWrapper">
-        <img class="post-img" src={`${getImg}`} alt="" height="600px" width="100%">
-        <h1>{templateTitle} Template</h1>
-    </div>
-    <Markdown content = {description}/>
-    <Markdown>
-        ## Getting Started
-        
-        To start using the {templateTitle} template, enter the following into your terminal
-    </Markdown>
-    <pre data-lang="bash" class="lang-bash">npm init astro my-astro-project -- --template {name}</pre>
-    <div class="external-links">
-        <a rel="noopener noreferrer nofollow" target="_blank" href={`https://githubbox.com/snowpackjs/astro/tree/main/examples/${name}`}>
-            <img src="https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=flat-square&logo=codesandbox"/>
-        </a>
-        <a rel="noopener noreferrer nofollow" target="_blank" href={`https://app.netlify.com/start/deploy?repository=https://github.com/snowpackjs/astro/tree/main/examples/${name}`}>
-            <img src="https://www.netlify.com/img/deploy/button.svg"/>
-        </a>
-        
-    </div>
-
-    <div>
-        <CollapsibleReadme label={`${templateTitle} Readme`} readme={readme}/>
-    </div>
-        
-</Layout>
-<style lang="scss">
-    :root{
-        scroll-behavior: smooth;
-    }
-    .external-links{
-        margin-top: 2.5%;
-        display: flex;
-        flex-wrap: nowrap;
-        align-content: flex-start;
-        justify-content: space-evenly;
-        align-items: center;
-    }
-    .post-img{
-        clip-path: inset(0 0 0 0 round 5% 20% 0 10%);
-     }
-</style>
-\ No newline at end of file
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