diff --git a/docs/src/components/ContainerQuery.astro b/docs/src/components/ContainerQuery.astro
new file mode 100644
index 000000000..253cf43ec
--- /dev/null
+++ b/docs/src/components/ContainerQuery.astro
@@ -0,0 +1,5 @@
+
\ No newline at end of file
diff --git a/docs/src/components/Examples/Card.astro b/docs/src/components/Examples/Card.astro
new file mode 100644
index 000000000..81d3b97f4
--- /dev/null
+++ b/docs/src/components/Examples/Card.astro
@@ -0,0 +1,64 @@
+---
+import CodeBar from './Codebar.tsx'
+import CardButtons from './CardButtons.astro'
+
+const {data, index} = Astro.props;
+
+// NOTE: Needed until we get hosted demos of official templates.
+const PLACEHOLDER_THUMBNAILS = [
+ // `#ba5370, #F4E2D8`,
+ // `#22c1c3, #fdbb2d`,
+ // `#7a5e99, #9f5dcf, #e864ca, #fdeff9`,
+ // `#e1eec3, #f05053`,
+ // `#7f00ff, #e100ff`,
+ `var(--theme-bg-accent), var(--theme-accent)`,
+]
+
+const hasScreenshot = !!data.demo;
+const backgroundStyle = hasScreenshot ? `url('https://v1.screenshot.11ty.dev/${encodeURIComponent(data.demo)}/medium/9:16/')` : `linear-gradient(60deg, var(--theme-bg-accent), var(--theme-accent))`
+---
+
+
+ {hasScreenshot && }
+
+
+
+
\ No newline at end of file
diff --git a/docs/src/components/Examples/CardButtons.astro b/docs/src/components/Examples/CardButtons.astro
new file mode 100644
index 000000000..f7393df42
--- /dev/null
+++ b/docs/src/components/Examples/CardButtons.astro
@@ -0,0 +1,37 @@
+---
+ export interface Props{
+ dir:string
+ }
+const {dir} = Astro.props
+const icons = [
+ ,
+ ,
+
+ ]
+---
+
+
+
\ No newline at end of file
diff --git a/docs/src/components/Examples/CardLink.tsx b/docs/src/components/Examples/CardLink.tsx
new file mode 100644
index 000000000..f17ee724f
--- /dev/null
+++ b/docs/src/components/Examples/CardLink.tsx
@@ -0,0 +1,51 @@
+import { JSX } from '@babel/types';
+import type { Component } from 'preact';
+import { h, Fragment } from 'preact';
+import { useRef } from 'preact/hooks';
+
+export type CardLinkProps ={
+ href:string
+ name:string
+ children:JSX | JSX[]
+}
+
+const CardLink:Component=({href,name,children}:CardLinkProps):JSX.Element=>{
+ const Card = useRef(null)
+ /**
+ * Set Title Attribute when Hovering over Card
+ * @param e - Mouse Enter Event
+ */
+ function handleOnMouseEnter(e){
+ const cardBody = Card.current.querySelector('.card-body')
+ const cardThumb = Card.current.querySelector('.icon-image')
+ const cardImg = Card.current.querySelector('.heroImg')
+
+ if(e.target === cardBody || e.target === cardThumb || e.target === cardImg ) {
+ e.target.setAttribute('title',`Click to find out more about our ${name} template`)
+ }
+
+
+ }
+ /**
+ * Click Link Card to Page
+ * @param e - Click Event
+ * @returns new window location
+ */
+ function handleOnClick(e){
+ const card = e.target
+ const mainLink = card.querySelector('.main-link')
+ const clickableArea = ['.card-body','.icon-image','.heroImg']
+ for(let area of clickableArea){
+ if(e.currentTarget.classList.contains(area)) {
+ return mainLink.click()
+ }
+ }
+ }
+ return(
+
+ {children}
+
+ )
+}
+
+export default CardLink
\ No newline at end of file
diff --git a/docs/src/components/Examples/Codebar.tsx b/docs/src/components/Examples/Codebar.tsx
new file mode 100644
index 000000000..f2bca6b8d
--- /dev/null
+++ b/docs/src/components/Examples/Codebar.tsx
@@ -0,0 +1,43 @@
+import type { FunctionalComponent } from 'preact';
+import { h, Fragment } from 'preact';
+import{useState,useRef,useEffect} from 'preact/hooks'
+
+export type CodeBar ={
+ content:string
+ command:string
+}
+
+const CodeBar:FunctionalComponent=({content,command})=>{
+ const [clicked,setClicked]=useState(false)
+ const [titleTxt,setTitleTxt] = useState("Copy Command to Clipboard")
+ useEffect(()=>{
+ const timeout = setTimeout(()=>{
+ setClicked(false)
+ setTitleTxt("Copy Command to Clipboard")
+ },1500)
+ return ()=> clearTimeout(timeout)
+ },[clicked])
+ /**
+ *
+ */
+ function onClick(e){
+ setClicked(true)
+ setTitleTxt("Copied to Clipboard!")
+ const titleAttr= e.target
+ const clipboard = navigator.clipboard
+ return clipboard.writeText(`${command}`)
+ }
+
+ return(
+
+
+ {content}
+
+
+ )
+}
+
+export default CodeBar
+
+
+
diff --git a/docs/src/components/Examples/CollapsibleReadme.astro b/docs/src/components/Examples/CollapsibleReadme.astro
new file mode 100644
index 000000000..679b467d3
--- /dev/null
+++ b/docs/src/components/Examples/CollapsibleReadme.astro
@@ -0,0 +1,95 @@
+---
+import {Markdown} from 'astro/components'
+export interface Props{
+ label:string;
+ readme:string;
+}
+const {label,readme} = Astro.props
+---
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/src/components/Examples/Thumbnail.astro b/docs/src/components/Examples/Thumbnail.astro
new file mode 100644
index 000000000..c4364396d
--- /dev/null
+++ b/docs/src/components/Examples/Thumbnail.astro
@@ -0,0 +1,124 @@
+---
+import {Markdown} from 'astro/components'
+import formatName from './function/format-name.js'
+const {data:{name,pkgJSON:{description}}} = Astro.props
+---
+
+
+
+
+
+
+
+
+
+
+
{description}
+
--template {name}
+
+
{title}
- }
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()
+
+---
+
+