docs: 📝 update docs

packages/docs/src/routes/blog/index.tsx

@@ -0,0 +1,27 @@
+import { component$ } from '@builder.io/qwik'
+import type { DocumentHead } from '@builder.io/qwik-city'
+
+export default component$(() => {
+    return (
+        <>
+            <section>
+                <div class="max-w-6xl mx-auto py-6 px-4 sm:px-6 h-[60vh]">
+                    <h1 class="text-4xl font-bold leading-tighter tracking-tighter mb-8 font-heading">
+                        Blog
+                    </h1>
+                    <p class="text-xl">Coming soon ...</p>
+                </div>
+            </section>
+        </>
+    )
+})
+
+export const head: DocumentHead = {
+    title: 'Blog — Qwind',
+    meta: [
+        {
+            name: 'description',
+            content: 'Lorem ipsum lorem ...',
+        },
+    ],
+}

packages/docs/src/routes/docs/index.mdx

@@ -0,0 +1,11 @@
+# Titulo
+
+Below is an example of markdown in JSX.
+
+```js
+const a = hola
+```
+
+<div style={{ padding: '1rem', backgroundColor: 'violet' }}>
+    Try and change the background color to `tomato`.
+</div>

packages/docs/src/routes/docs/layout!.tsx

@@ -0,0 +1,45 @@
+import { component$, Slot, useStore } from '@builder.io/qwik'
+import type { DocumentHead } from '@builder.io/qwik-city'
+import Footer from '~/components/widgets/Footer'
+import Header from '~/components/widgets/Header'
+import NavBar from '~/components/widgets/NavBar'
+
+export default component$(() => {
+    const store = useStore({
+        options: [
+            { name: 'Primeros pasos', link: '/docs', class: 'font-semibold' },
+            { name: 'Instalación', link: '/docs' },
+            { name: 'Configuración', link: '/docs' },
+            { name: 'Forma de pensar', link: '/docs' },
+        ],
+    })
+
+    return (
+        <>
+            <Header />
+            <main class="container mx-auto px-12">
+                <div class={'grid grid-cols-4 gap-4'}>
+                    <div class={' col-span-1'}>
+                        <NavBar options={store.options} />
+                    </div>
+                    <div class={'col-span-3'}>
+                        <Slot />
+                    </div>
+                </div>
+            </main>
+
+            <Footer />
+        </>
+    )
+})
+
+export const head: DocumentHead = {
+    title: 'Qwind — Free template for starts a website using Qwik + Tailwind CSS',
+    meta: [
+        {
+            name: 'description',
+            content:
+                'Qwind is a free and ready to start template to make your website using Qwik and Tailwind CSS.',
+        },
+    ],
+}

packages/docs/src/routes/docs/menu.md

@@ -0,0 +1,13 @@
+# Guide
+
+## Guides
+
+- [Overview](overview/index.mdx)
+
+
+
+## Community
+
+- [GitHub](https://github.com/BuilderIO/qwik)
+- [@QwikDev](https://twitter.com/QwikDev)
+- [Discord](https://qwik.builder.io/chat)

packages/docs/src/routes/docs/overview/index.mdx

@@ -0,0 +1,65 @@
+---
+title: Overview
+contributors:
+    - adamdbradley
+    - steve8708
+    - manucorporat
+    - gabrielgrant
+---
+
+# Welcome to Qwik
+
+Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity. Your sites and apps can boot with about 1kb of JS (regardless of application complexity), and achieve consistent performance at scale.
+
+[See more presentations, videos, and podcasts](/media/)
+
+[Check out sites built with Qwik](/showcase/)
+
+## Getting Started with Qwik
+
+<div class="card-grid">
+    <a class="card card-center" href="/docs/getting-started/">
+        <p class="icon">🚀</p>
+        <h3>npm create qwik</h3>
+    </a>
+    <a class="card card-center" href="/docs/think-qwik/">
+        <p class="icon">🤔</p>
+        <h3>Why Qwik?</h3>
+    </a>
+    <a class="card card-center" href="/docs/components/overview/">
+        <p class="icon">📚</p>
+        <h3>API</h3>
+    </a>
+    <a class="card card-center" href="https://qwik.builder.io/chat">
+        <h3>Community</h3>
+    </a>
+    <a class="card card-center" href="/qwikcity/overview/">
+        <p class="icon">🌃</p>
+        <h3>QwikCity & Routing</h3>
+    </a>
+</div>
+
+## Qwik Goals
+
+<div class="card-grid">
+    <div class="card">
+        <h3>General-purpose</h3>
+        <p>Qwik can be used to build any type of web site or application</p>
+    </div>
+    <div class="card">
+        <h3>Instant-on</h3>
+        <p>
+            Unlike other frameworks, Qwik is resumable which means Qwik
+            applications require 0 hydration. This allows Qwik apps to have
+            instant-on interactivity, regardless of size or complexity
+        </p>
+    </div>
+    <div class="card">
+        <h3>Optimized for speed</h3>
+        <p>
+            Qwik has unprecedented performance, offering sub-second full page
+            loads even on mobile devices. Qwik achieves this by delivering pure
+            HTML, and incrementally loading JS only as-needed.
+        </p>
+    </div>
+</div>

packages/docs/src/routes/index.tsx

@@ -0,0 +1,31 @@
+import { component$ } from '@builder.io/qwik'
+import type { DocumentHead } from '@builder.io/qwik-city'
+
+import Hero from '~/components/widgets/Hero'
+import Features from '~/components/widgets/Features'
+import FAQs from '~/components/widgets/FAQs'
+import Stats from '~/components/widgets/Stats'
+import CallToAction from '~/components/widgets/CallToAction'
+
+export default component$(() => {
+    return (
+        <>
+            <Hero />
+            <Features />
+            <FAQs />
+            <Stats />
+            <CallToAction />
+        </>
+    )
+})
+
+export const head: DocumentHead = {
+    title: 'Qwind — Free template for starts a website using Qwik + Tailwind CSS',
+    meta: [
+        {
+            name: 'description',
+            content:
+                'Qwind is a free and ready to start template to make your website using Qwik and Tailwind CSS.',
+        },
+    ],
+}

packages/docs/src/routes/layout.tsx

@@ -0,0 +1,28 @@
+import { component$, Slot } from '@builder.io/qwik'
+
+import Footer from '~/components/widgets/Footer'
+import Header from '~/components/widgets/Header'
+
+export default component$(() => {
+    // useClientEffect$(() => {
+    //   if (
+    //     localStorage.theme === "dark" ||
+    //     (!("theme" in localStorage) &&
+    //       window.matchMedia("(prefers-color-scheme: dark)").matches)
+    //   ) {
+    //     document.documentElement.classList.add("dark");
+    //   } else {
+    //     document.documentElement.classList.remove("dark");
+    //   }
+    // });
+
+    return (
+        <>
+            <Header />
+            <main>
+                <Slot />
+            </main>
+            <Footer />
+        </>
+    )
+})

packages/docs/src/routes/service-worker.ts

@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
+ *
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker'
+
+setupServiceWorker()
+
+addEventListener('install', () => self.skipWaiting())
+
+addEventListener('activate', () => self.clients.claim())
+
+declare const self: ServiceWorkerGlobalScope