feat: add new docs homepage, migrate faq page

packages/documentation-new/astro.config.mjs

@@ -8,8 +8,14 @@ export default defineConfig({
 			title: 'Astro Snipcart',
 			social: {
 				github: 'https://github.com/lloydjatkinson/astro-snipcart',
+				mastodon: 'https://mastodon.social/@lloydjatkinson',
+				openCollective: 'https://opencollective.com/lloyd-atkinson-open-collective',
 			},
 			sidebar: [
+				{
+					label: 'Introduction',
+					link: '/introduction',
+				},
 				{
 					label: 'Guides',
 					// items: [

packages/documentation-new/src/components/CardWithAward.astro

@@ -0,0 +1,31 @@
+---
+import type { ComponentProps } from 'astro/types';
+import { Card } from '@astrojs/starlight/components';
+import { Image } from 'astro:assets';
+import award from '../assets/astro-award.png';
+
+export type Props = ComponentProps<typeof Card>;
+---
+<style>
+    .container {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    img {
+        width: 80px;
+        transform: translateY(-80px) translateX(-80px) rotate(10deg);
+    }
+</style>
+<div class="container">
+    <Card {...Astro.props}>
+        <div class="container">
+            <div>
+                <slot />
+            </div>
+        </div>
+    </Card>
+    <div>
+        <Image src={award} alt="I won." width={200} />
+    </div>
+</div>

packages/documentation-new/src/content/docs/index.mdx

@@ -5,18 +5,26 @@ template: splash
 hero:
   tagline: Start selling products with some HTML and Astro components in minutes!
   image:
-    file: ../../assets/astro-snipcart-logo-mark.png
+    alt: Astro Snipcart logo
+    dark: ../../assets/astro-snipcart-logo-mark-dark.png
+    light: ../../assets/astro-snipcart-logo-mark.png
   actions:
     - text: Get started
       link: /guides/example/
       icon: right-arrow
       variant: primary
+    - text: Read the introduction
+      link: /introduction
     - text: View on GitHub
       link: https://github.com/lloydjatkinson/astro-snipcart
-      icon: external
+      icon: github
 ---
-
 import { Card, CardGrid } from '@astrojs/starlight/components';
+import CardWithAward from '../../components/CardWithAward.astro';
+
+<CardWithAward title="Astro Hackathon Winner!" icon="star">
+	Astro Snipcart won a previous hackathon. It was submitted in two categories [and won one of them](https://hackathon-1-0-projects.vercel.app/theme/astro-snipcart-design-system).
+</CardWithAward>
 
 ## Next steps
 

packages/documentation-new/src/content/docs/introduction.mdx

@@ -0,0 +1,66 @@
+---
+title: Introduction
+description: Introducing an Astro integration for Snipcart - Start your E-Commerce store and sell products in minutes!
+---
+import { LinkCard, Card, CardGrid } from '@astrojs/starlight/components';
+
+This integration is a solution for rapidly building and selling products on the web. Astro Snipcart is a free and open source e-commerce Astro integration that is built on top of the [Snipcart](https://snipcart.com) platform.
+
+*Create an e-commerce site with just a few lines of HTML and Astro components!*
+
+> What is Snipcart?
+>
+> Snipcart is a powerful, developer-first HTML/JavaScript shopping cart platform. You can use it to add custom e-commerce to any sites or web applications in minutes.
+
+<LinkCard
+  title="Demonstration"
+  href="https://astro-snipcart-playground.vercel.app/"
+  description="A fully functional e-commerce demo site built with Astro Snipcart" />
+
+<CardGrid>
+  <LinkCard
+    title="Demonstration"
+    href="https://astro-snipcart-playground.vercel.app/"
+    description="A fully functional e-commerce demo site built with Astro Snipcart" />
+  <LinkCard
+    title="Snipcart Documentation"
+    href="https://astro-snipcart-playground.vercel.app/"
+    description="The Snipcart platform documentation" />
+</CardGrid>
+
+
+## Features
+
+This Astro integration contains all of the features that you need to build an e-commerce site with [Snipcart](https://snipcart.com/), including:
+
+- ✅ **Automatic installation of the Snipcart library**
+- ✅ **Zero JavaScript by default (apart from Snipcart)**
+- ✅ **Astro components to define products**
+- ✅ **Astro components for features such as displaying basket and total price**
+- ✅ **TypeScript based product definitions surfaced as Astro component props**
+- ✅ **An optional small design system providing common e-commerce components**
+- 🔜 **Not just products, but subscription support also!**
+
+## Getting Started
+
+Read the [Getting Started](./getting-started) guide to learn how to install and use the Astro Snipcart integration.
+Here is a small preview of how easy it is to create a product.
+
+```astro frame="code" title="/components/Product.astro"
+<Product
+    as="span"
+    id="SKU-0003"
+    name="Standard T-Shirt"
+    price={12.99}
+    description="Every day basic t-shirt"
+    image="/blue-t-shirt.jpg"
+    categories={['cotton', 'clothes', 'blue']}>
+    <Button>
+        Add
+    </Button>
+</Product>
+```
+
+Store and load your data from [anywhere that suits your project best!](/en/product-definition)
+
+![Astro Snipcart](/data-storage.png "Astro Snipcart")