1 files changed, 87 insertions, 0 deletions
diff --git a/docs/src/pages/examples.astro b/docs/src/pages/examples.astro
new file mode 100644
index 000000000..6128b2e20
--- /dev/null
+++ b/docs/src/pages/examples.astro
@@ -0,0 +1,87 @@
+---
+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>