diff --git a/packages/create-qwik/src/helpers/templateManager.ts b/packages/create-qwik/src/helpers/templateManager.ts
index f94662edd9a..9221b370e87 100644
--- a/packages/create-qwik/src/helpers/templateManager.ts
+++ b/packages/create-qwik/src/helpers/templateManager.ts
@@ -1,5 +1,4 @@
 import type { IntegrationData, IntegrationType } from 'packages/qwik/src/cli/types';
-
 import { loadIntegrations } from 'packages/qwik/src/cli/utils/integrations';
 
 let integrations: IntegrationData[] | undefined = undefined;
diff --git a/scripts/validate-cli.ts b/scripts/validate-cli.ts
index 29a7f0851de..e7c07e8508b 100644
--- a/scripts/validate-cli.ts
+++ b/scripts/validate-cli.ts
@@ -45,9 +45,10 @@ async function validateCreateQwikCli() {
   const tmpDir = join(__dirname, '..', 'dist-dev');
 
   await Promise.all([
-    validateStarter(api, tmpDir, 'playground', true, `👻`, qwikVersion),
-    validateStarter(api, tmpDir, 'empty', true, `🫙`, qwikVersion),
-    validateStarter(api, tmpDir, 'library', false, `📚`, qwikVersion),
+    validateStarter(api, tmpDir, 'basic-starter', true, `👋`, qwikVersion),
+    validateStarter(api, tmpDir, 'playground-starter', true, `👻`, qwikVersion),
+    validateStarter(api, tmpDir, 'empty-starter', true, `🫙`, qwikVersion),
+    validateStarter(api, tmpDir, 'library-starter', false, `📚`, qwikVersion),
   ]).catch((e) => {
     console.error(e);
     panic(String(e));
diff --git a/starters/apps/basic-starter/package.json b/starters/apps/basic-starter/package.json
new file mode 100644
index 00000000000..8037de6c935
--- /dev/null
+++ b/starters/apps/basic-starter/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "qwik-basic-starter",
+  "description": "One page app ready to go",
+  "type": "module",
+  "__qwik__": {
+    "priority": 2,
+    "displayName": "Basic App (Qwik City + Qwik)",
+    "qwikCity": true,
+    "docs": [
+      "https://qwik.dev/docs/getting-started/"
+    ]
+  }
+}
diff --git a/starters/apps/empty/public/favicon.svg b/starters/apps/basic-starter/public/favicon.svg
similarity index 100%
rename from starters/apps/empty/public/favicon.svg
rename to starters/apps/basic-starter/public/favicon.svg
diff --git a/starters/apps/playground/public/fonts/poppins-400.woff2 b/starters/apps/basic-starter/public/fonts/poppins-400.woff2
similarity index 100%
rename from starters/apps/playground/public/fonts/poppins-400.woff2
rename to starters/apps/basic-starter/public/fonts/poppins-400.woff2
diff --git a/starters/apps/playground/public/fonts/poppins-500.woff2 b/starters/apps/basic-starter/public/fonts/poppins-500.woff2
similarity index 100%
rename from starters/apps/playground/public/fonts/poppins-500.woff2
rename to starters/apps/basic-starter/public/fonts/poppins-500.woff2
diff --git a/starters/apps/playground/public/fonts/poppins-700.woff2 b/starters/apps/basic-starter/public/fonts/poppins-700.woff2
similarity index 100%
rename from starters/apps/playground/public/fonts/poppins-700.woff2
rename to starters/apps/basic-starter/public/fonts/poppins-700.woff2
diff --git a/starters/apps/empty/public/manifest.json b/starters/apps/basic-starter/public/manifest.json
similarity index 100%
rename from starters/apps/empty/public/manifest.json
rename to starters/apps/basic-starter/public/manifest.json
diff --git a/starters/apps/empty/public/robots.txt b/starters/apps/basic-starter/public/robots.txt
similarity index 100%
rename from starters/apps/empty/public/robots.txt
rename to starters/apps/basic-starter/public/robots.txt
diff --git a/starters/apps/playground/src/components/router-head/router-head.tsx b/starters/apps/basic-starter/src/components/router-head/router-head.tsx
similarity index 100%
rename from starters/apps/playground/src/components/router-head/router-head.tsx
rename to starters/apps/basic-starter/src/components/router-head/router-head.tsx
diff --git a/starters/apps/playground/src/components/starter/footer/footer.module.css b/starters/apps/basic-starter/src/components/starter/footer/footer.module.css
similarity index 100%
rename from starters/apps/playground/src/components/starter/footer/footer.module.css
rename to starters/apps/basic-starter/src/components/starter/footer/footer.module.css
diff --git a/starters/apps/basic-starter/src/components/starter/footer/footer.tsx b/starters/apps/basic-starter/src/components/starter/footer/footer.tsx
new file mode 100644
index 00000000000..d54749b2bf9
--- /dev/null
+++ b/starters/apps/basic-starter/src/components/starter/footer/footer.tsx
@@ -0,0 +1,12 @@
+import { component$ } from "@builder.io/qwik";
+import styles from "./footer.module.css";
+
+export default component$(() => {
+  return (
+    <footer>
+      <div class="container">
+        <span class={styles.anchor}>Made with ♡ by the Qwik Team</span>
+      </div>
+    </footer>
+  );
+});
diff --git a/starters/apps/playground/src/components/starter/header/header.module.css b/starters/apps/basic-starter/src/components/starter/header/header.module.css
similarity index 100%
rename from starters/apps/playground/src/components/starter/header/header.module.css
rename to starters/apps/basic-starter/src/components/starter/header/header.module.css
diff --git a/starters/apps/playground/src/components/starter/header/header.tsx b/starters/apps/basic-starter/src/components/starter/header/header.tsx
similarity index 100%
rename from starters/apps/playground/src/components/starter/header/header.tsx
rename to starters/apps/basic-starter/src/components/starter/header/header.tsx
diff --git a/starters/apps/playground/src/components/starter/hero/hero.module.css b/starters/apps/basic-starter/src/components/starter/hero/hero.module.css
similarity index 100%
rename from starters/apps/playground/src/components/starter/hero/hero.module.css
rename to starters/apps/basic-starter/src/components/starter/hero/hero.module.css
diff --git a/starters/apps/basic-starter/src/components/starter/hero/hero.tsx b/starters/apps/basic-starter/src/components/starter/hero/hero.tsx
new file mode 100644
index 00000000000..d84e854e436
--- /dev/null
+++ b/starters/apps/basic-starter/src/components/starter/hero/hero.tsx
@@ -0,0 +1,82 @@
+import { component$ } from "@builder.io/qwik";
+import ImgThunder from "../../../media/thunder.png?jsx";
+import styles from "./hero.module.css";
+
+export default component$(() => {
+  return (
+    <div class={["container", styles.hero]}>
+      <ImgThunder class={styles["hero-image"]} alt="Image thunder" />
+      <h1>
+        So <span class="highlight">fantastic</span>
+        <br />
+        to have <span class="highlight">you</span> here
+      </h1>
+      <p>To see cooler demos generate the playground app 😉</p>
+      <div class={styles["button-group"]}>
+        <button
+          onClick$={async () => {
+            const defaults = {
+              spread: 360,
+              ticks: 70,
+              gravity: 0,
+              decay: 0.95,
+              startVelocity: 30,
+              colors: ["006ce9", "ac7ff4", "18b6f6", "713fc2", "ffffff"],
+              origin: {
+                x: 0.5,
+                y: 0.35,
+              },
+            };
+
+            function loadConfetti() {
+              return new Promise<(opts: any) => void>((resolve, reject) => {
+                if ((globalThis as any).confetti) {
+                  return resolve((globalThis as any).confetti as any);
+                }
+                const script = document.createElement("script");
+                script.src =
+                  "https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js";
+                script.onload = () =>
+                  resolve((globalThis as any).confetti as any);
+                script.onerror = reject;
+                document.head.appendChild(script);
+                script.remove();
+              });
+            }
+
+            const confetti = await loadConfetti();
+
+            function shoot() {
+              confetti({
+                ...defaults,
+                particleCount: 80,
+                scalar: 1.2,
+              });
+
+              confetti({
+                ...defaults,
+                particleCount: 60,
+                scalar: 0.75,
+              });
+            }
+
+            setTimeout(shoot, 0);
+            setTimeout(shoot, 100);
+            setTimeout(shoot, 200);
+            setTimeout(shoot, 300);
+            setTimeout(shoot, 400);
+          }}
+        >
+          Time to celebrate
+        </button>
+        <a
+          href="https://qwik.dev/docs"
+          target="_blank"
+          class="button button-dark"
+        >
+          Explore the docs
+        </a>
+      </div>
+    </div>
+  );
+});
diff --git a/starters/apps/playground/src/components/starter/icons/qwik.tsx b/starters/apps/basic-starter/src/components/starter/icons/qwik.tsx
similarity index 100%
rename from starters/apps/playground/src/components/starter/icons/qwik.tsx
rename to starters/apps/basic-starter/src/components/starter/icons/qwik.tsx
diff --git a/starters/apps/playground/src/components/starter/infobox/infobox.module.css b/starters/apps/basic-starter/src/components/starter/infobox/infobox.module.css
similarity index 100%
rename from starters/apps/playground/src/components/starter/infobox/infobox.module.css
rename to starters/apps/basic-starter/src/components/starter/infobox/infobox.module.css
diff --git a/starters/apps/playground/src/components/starter/infobox/infobox.tsx b/starters/apps/basic-starter/src/components/starter/infobox/infobox.tsx
similarity index 100%
rename from starters/apps/playground/src/components/starter/infobox/infobox.tsx
rename to starters/apps/basic-starter/src/components/starter/infobox/infobox.tsx
diff --git a/starters/apps/playground/src/global.css b/starters/apps/basic-starter/src/global.css
similarity index 100%
rename from starters/apps/playground/src/global.css
rename to starters/apps/basic-starter/src/global.css
diff --git a/starters/apps/playground/src/media/thunder.png b/starters/apps/basic-starter/src/media/thunder.png
similarity index 100%
rename from starters/apps/playground/src/media/thunder.png
rename to starters/apps/basic-starter/src/media/thunder.png
diff --git a/starters/apps/playground/src/root.tsx b/starters/apps/basic-starter/src/root.tsx
similarity index 100%
rename from starters/apps/playground/src/root.tsx
rename to starters/apps/basic-starter/src/root.tsx
diff --git a/starters/apps/basic-starter/src/routes/index.tsx b/starters/apps/basic-starter/src/routes/index.tsx
new file mode 100644
index 00000000000..596f4c7cbe2
--- /dev/null
+++ b/starters/apps/basic-starter/src/routes/index.tsx
@@ -0,0 +1,94 @@
+import { component$ } from "@builder.io/qwik";
+import type { DocumentHead } from "@builder.io/qwik-city";
+
+import Hero from "../components/starter/hero/hero";
+import Infobox from "../components/starter/infobox/infobox";
+
+/* To start fresh you can either:
+   1. Generate an "empty" starter app
+   2. Delete everything from <Hero> and below, delete all styles, the "components/starter" folder and fonts in "public".
+*/
+export default component$(() => {
+  return (
+    <>
+      <Hero />
+
+      <div role="presentation" class="ellipsis"></div>
+
+      <div class="container container-flex">
+        <Infobox>
+          <div q:slot="title" class="icon icon-cli">
+            CLI Commands
+          </div>
+          <>
+            <p>
+              <code>npm run dev</code>
+              <br />
+              Starts the development server and watches for changes
+            </p>
+            <p>
+              <code>npm run preview</code>
+              <br />
+              Creates production build and starts a server to preview it
+            </p>
+            <p>
+              <code>npm run build</code>
+              <br />
+              Creates production build
+            </p>
+            <p>
+              <code>npm run qwik add</code>
+              <br />
+              Runs the qwik CLI to add integrations
+            </p>
+          </>
+        </Infobox>
+
+        <div>
+          <Infobox>
+            <div q:slot="title" class="icon icon-community">
+              Community
+            </div>
+            <ul>
+              <li>
+                <span>Questions or just want to say hi? </span>
+                <a href="https://qwik.dev/chat" target="_blank">
+                  Chat on discord!
+                </a>
+              </li>
+              <li>
+                <span>Follow </span>
+                <a href="https://twitter.com/QwikDev" target="_blank">
+                  @QwikDev
+                </a>
+                <span> on Twitter</span>
+              </li>
+              <li>
+                <span>Open issues and contribute on </span>
+                <a href="https://github.com/QwikDev/qwik" target="_blank">
+                  GitHub
+                </a>
+              </li>
+              <li>
+                <span>Watch </span>
+                <a href="https://qwik.dev/media/" target="_blank">
+                  Presentations, Podcasts, Videos, etc.
+                </a>
+              </li>
+            </ul>
+          </Infobox>
+        </div>
+      </div>
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: "Welcome to Qwik",
+  meta: [
+    {
+      name: "description",
+      content: "Qwik site description",
+    },
+  ],
+};
diff --git a/starters/apps/basic-starter/src/routes/layout.tsx b/starters/apps/basic-starter/src/routes/layout.tsx
new file mode 100644
index 00000000000..92c5d43e0eb
--- /dev/null
+++ b/starters/apps/basic-starter/src/routes/layout.tsx
@@ -0,0 +1,31 @@
+import { component$, Slot, useStyles$ } from "@builder.io/qwik";
+
+import Footer from "../components/starter/footer/footer";
+import Header from "../components/starter/header/header";
+
+import type { RequestHandler } from "@builder.io/qwik-city";
+import styles from "./styles.css?inline";
+
+export const onGet: RequestHandler = async ({ cacheControl }) => {
+  // Control caching for this request for best performance and to reduce hosting costs:
+  // https://qwik.dev/docs/caching/
+  cacheControl({
+    // Always serve a cached response by default, up to a week stale
+    staleWhileRevalidate: 60 * 60 * 24 * 7,
+    // Max once every 5 seconds, revalidate on the server to get a fresh version of this page
+    maxAge: 5,
+  });
+};
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <>
+      <Header />
+      <main>
+        <Slot />
+      </main>
+      <Footer />
+    </>
+  );
+});
diff --git a/starters/apps/empty/src/routes/service-worker.ts b/starters/apps/basic-starter/src/routes/service-worker.ts
similarity index 100%
rename from starters/apps/empty/src/routes/service-worker.ts
rename to starters/apps/basic-starter/src/routes/service-worker.ts
diff --git a/starters/apps/playground/src/routes/styles.css b/starters/apps/basic-starter/src/routes/styles.css
similarity index 100%
rename from starters/apps/playground/src/routes/styles.css
rename to starters/apps/basic-starter/src/routes/styles.css
diff --git a/starters/apps/empty/package.json b/starters/apps/empty-starter/package.json
similarity index 100%
rename from starters/apps/empty/package.json
rename to starters/apps/empty-starter/package.json
diff --git a/starters/apps/playground/public/favicon.svg b/starters/apps/empty-starter/public/favicon.svg
similarity index 100%
rename from starters/apps/playground/public/favicon.svg
rename to starters/apps/empty-starter/public/favicon.svg
diff --git a/starters/apps/playground/public/manifest.json b/starters/apps/empty-starter/public/manifest.json
similarity index 100%
rename from starters/apps/playground/public/manifest.json
rename to starters/apps/empty-starter/public/manifest.json
diff --git a/starters/apps/playground/public/robots.txt b/starters/apps/empty-starter/public/robots.txt
similarity index 100%
rename from starters/apps/playground/public/robots.txt
rename to starters/apps/empty-starter/public/robots.txt
diff --git a/starters/apps/empty/src/components/router-head/router-head.tsx b/starters/apps/empty-starter/src/components/router-head/router-head.tsx
similarity index 100%
rename from starters/apps/empty/src/components/router-head/router-head.tsx
rename to starters/apps/empty-starter/src/components/router-head/router-head.tsx
diff --git a/starters/apps/empty/src/global.css b/starters/apps/empty-starter/src/global.css
similarity index 100%
rename from starters/apps/empty/src/global.css
rename to starters/apps/empty-starter/src/global.css
diff --git a/starters/apps/empty/src/root.tsx b/starters/apps/empty-starter/src/root.tsx
similarity index 100%
rename from starters/apps/empty/src/root.tsx
rename to starters/apps/empty-starter/src/root.tsx
diff --git a/starters/apps/empty/src/routes/index.tsx b/starters/apps/empty-starter/src/routes/index.tsx
similarity index 100%
rename from starters/apps/empty/src/routes/index.tsx
rename to starters/apps/empty-starter/src/routes/index.tsx
diff --git a/starters/apps/empty/src/routes/layout.tsx b/starters/apps/empty-starter/src/routes/layout.tsx
similarity index 100%
rename from starters/apps/empty/src/routes/layout.tsx
rename to starters/apps/empty-starter/src/routes/layout.tsx
diff --git a/starters/apps/playground/src/routes/service-worker.ts b/starters/apps/empty-starter/src/routes/service-worker.ts
similarity index 100%
rename from starters/apps/playground/src/routes/service-worker.ts
rename to starters/apps/empty-starter/src/routes/service-worker.ts
diff --git a/starters/apps/library/.eslintignore b/starters/apps/library-starter/.eslintignore
similarity index 100%
rename from starters/apps/library/.eslintignore
rename to starters/apps/library-starter/.eslintignore
diff --git a/starters/apps/library/.eslintrc.cjs b/starters/apps/library-starter/.eslintrc.cjs
similarity index 100%
rename from starters/apps/library/.eslintrc.cjs
rename to starters/apps/library-starter/.eslintrc.cjs
diff --git a/starters/apps/library/.prettierignore b/starters/apps/library-starter/.prettierignore
similarity index 100%
rename from starters/apps/library/.prettierignore
rename to starters/apps/library-starter/.prettierignore
diff --git a/starters/apps/library/README.md b/starters/apps/library-starter/README.md
similarity index 100%
rename from starters/apps/library/README.md
rename to starters/apps/library-starter/README.md
diff --git a/starters/apps/library/gitignore b/starters/apps/library-starter/gitignore
similarity index 100%
rename from starters/apps/library/gitignore
rename to starters/apps/library-starter/gitignore
diff --git a/starters/apps/library/package.json b/starters/apps/library-starter/package.json
similarity index 100%
rename from starters/apps/library/package.json
rename to starters/apps/library-starter/package.json
diff --git a/starters/apps/library/src/components/counter/counter.tsx b/starters/apps/library-starter/src/components/counter/counter.tsx
similarity index 100%
rename from starters/apps/library/src/components/counter/counter.tsx
rename to starters/apps/library-starter/src/components/counter/counter.tsx
diff --git a/starters/apps/library/src/components/logo/logo.tsx b/starters/apps/library-starter/src/components/logo/logo.tsx
similarity index 100%
rename from starters/apps/library/src/components/logo/logo.tsx
rename to starters/apps/library-starter/src/components/logo/logo.tsx
diff --git a/starters/apps/library/src/entry.dev.tsx b/starters/apps/library-starter/src/entry.dev.tsx
similarity index 100%
rename from starters/apps/library/src/entry.dev.tsx
rename to starters/apps/library-starter/src/entry.dev.tsx
diff --git a/starters/apps/library/src/entry.ssr.tsx b/starters/apps/library-starter/src/entry.ssr.tsx
similarity index 100%
rename from starters/apps/library/src/entry.ssr.tsx
rename to starters/apps/library-starter/src/entry.ssr.tsx
diff --git a/starters/apps/library/src/index.ts b/starters/apps/library-starter/src/index.ts
similarity index 100%
rename from starters/apps/library/src/index.ts
rename to starters/apps/library-starter/src/index.ts
diff --git a/starters/apps/library/src/root.tsx b/starters/apps/library-starter/src/root.tsx
similarity index 100%
rename from starters/apps/library/src/root.tsx
rename to starters/apps/library-starter/src/root.tsx
diff --git a/starters/apps/library/tsconfig.json b/starters/apps/library-starter/tsconfig.json
similarity index 100%
rename from starters/apps/library/tsconfig.json
rename to starters/apps/library-starter/tsconfig.json
diff --git a/starters/apps/library/vite.config.ts b/starters/apps/library-starter/vite.config.ts
similarity index 100%
rename from starters/apps/library/vite.config.ts
rename to starters/apps/library-starter/vite.config.ts
diff --git a/starters/apps/playground/package.json b/starters/apps/playground-starter/package.json
similarity index 87%
rename from starters/apps/playground/package.json
rename to starters/apps/playground-starter/package.json
index cea100fc5ec..eceb4647aa2 100644
--- a/starters/apps/playground/package.json
+++ b/starters/apps/playground-starter/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "qwik-basic-starter",
+  "name": "qwik-playground-starter",
   "description": "Demo app with sample routes",
   "type": "module",
   "__qwik__": {
diff --git a/starters/apps/playground-starter/public/favicon.svg b/starters/apps/playground-starter/public/favicon.svg
new file mode 100644
index 00000000000..0ded7c138b6
--- /dev/null
+++ b/starters/apps/playground-starter/public/favicon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 500"><g clip-path="url(#a)"><circle cx="250" cy="250" r="250" fill="#fff"/><path fill="#18B6F6" d="m367.87 418.45-61.17-61.18-.94.13v-.67L175.7 227.53l32.05-31.13L188.9 87.73 99.56 199.09c-15.22 15.42-18.03 40.51-7.08 59.03l55.83 93.11a46.82 46.82 0 0 0 40.73 22.81l27.65-.27 151.18 44.68Z"/><path fill="#AC7EF4" d="m401.25 196.94-12.29-22.81-6.41-11.67-2.54-4.56-.26.26-33.66-58.63a47.07 47.07 0 0 0-41.27-23.75l-29.51.8-88.01.28a47.07 47.07 0 0 0-40.33 23.34L93.4 207l95.76-119.54L314.7 226.19l-22.3 22.67 13.35 108.54.13-.26v.26h-.26l.26.27 10.42 10.2 50.62 49.78c2.13 2 5.6-.4 4.13-2.96l-31.25-61.85 54.5-101.3 1.73-2c.67-.81 1.33-1.62 1.87-2.42a46.8 46.8 0 0 0 3.34-50.18Z"/><path fill="#fff" d="M315.1 225.65 189.18 87.6l17.9 108.14L175 227l130.5 130.27-11.75-108.14 21.37-23.48Z"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h500v500H0z"/></clipPath></defs></svg>
\ No newline at end of file
diff --git a/starters/apps/playground-starter/public/fonts/poppins-400.woff2 b/starters/apps/playground-starter/public/fonts/poppins-400.woff2
new file mode 100644
index 00000000000..b69e0091c26
Binary files /dev/null and b/starters/apps/playground-starter/public/fonts/poppins-400.woff2 differ
diff --git a/starters/apps/playground-starter/public/fonts/poppins-500.woff2 b/starters/apps/playground-starter/public/fonts/poppins-500.woff2
new file mode 100644
index 00000000000..c6603368bf1
Binary files /dev/null and b/starters/apps/playground-starter/public/fonts/poppins-500.woff2 differ
diff --git a/starters/apps/playground-starter/public/fonts/poppins-700.woff2 b/starters/apps/playground-starter/public/fonts/poppins-700.woff2
new file mode 100644
index 00000000000..bf022fc77e7
Binary files /dev/null and b/starters/apps/playground-starter/public/fonts/poppins-700.woff2 differ
diff --git a/starters/apps/playground-starter/public/manifest.json b/starters/apps/playground-starter/public/manifest.json
new file mode 100644
index 00000000000..c18e75f72a5
--- /dev/null
+++ b/starters/apps/playground-starter/public/manifest.json
@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "qwik-project-name",
+  "short_name": "Welcome to Qwik",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A Qwik project app."
+}
diff --git a/starters/apps/playground-starter/public/robots.txt b/starters/apps/playground-starter/public/robots.txt
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/starters/apps/playground-starter/src/components/router-head/router-head.tsx b/starters/apps/playground-starter/src/components/router-head/router-head.tsx
new file mode 100644
index 00000000000..51b69104607
--- /dev/null
+++ b/starters/apps/playground-starter/src/components/router-head/router-head.tsx
@@ -0,0 +1,49 @@
+import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
+
+import { component$ } from "@builder.io/qwik";
+
+/**
+ * The RouterHead component is placed inside of the document `<head>` element.
+ */
+export const RouterHead = component$(() => {
+  const head = useDocumentHead();
+  const loc = useLocation();
+
+  return (
+    <>
+      <title>{head.title}</title>
+
+      <link rel="canonical" href={loc.url.href} />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+      {head.meta.map((m) => (
+        <meta key={m.key} {...m} />
+      ))}
+
+      {head.links.map((l) => (
+        <link key={l.key} {...l} />
+      ))}
+
+      {head.styles.map((s) => (
+        <style
+          key={s.key}
+          {...s.props}
+          {...(s.props?.dangerouslySetInnerHTML
+            ? {}
+            : { dangerouslySetInnerHTML: s.style })}
+        />
+      ))}
+
+      {head.scripts.map((s) => (
+        <script
+          key={s.key}
+          {...s.props}
+          {...(s.props?.dangerouslySetInnerHTML
+            ? {}
+            : { dangerouslySetInnerHTML: s.script })}
+        />
+      ))}
+    </>
+  );
+});
diff --git a/starters/apps/playground/src/components/starter/counter/counter.module.css b/starters/apps/playground-starter/src/components/starter/counter/counter.module.css
similarity index 100%
rename from starters/apps/playground/src/components/starter/counter/counter.module.css
rename to starters/apps/playground-starter/src/components/starter/counter/counter.module.css
diff --git a/starters/apps/playground/src/components/starter/counter/counter.tsx b/starters/apps/playground-starter/src/components/starter/counter/counter.tsx
similarity index 100%
rename from starters/apps/playground/src/components/starter/counter/counter.tsx
rename to starters/apps/playground-starter/src/components/starter/counter/counter.tsx
diff --git a/starters/apps/playground-starter/src/components/starter/footer/footer.module.css b/starters/apps/playground-starter/src/components/starter/footer/footer.module.css
new file mode 100644
index 00000000000..87786f124cc
--- /dev/null
+++ b/starters/apps/playground-starter/src/components/starter/footer/footer.module.css
@@ -0,0 +1,23 @@
+.anchor {
+  color: white !important;
+  display: block;
+  font-size: 0.8rem;
+  text-align: center;
+  text-decoration: none;
+  line-height: 1.5;
+}
+
+.anchor span:not(.spacer) {
+  display: block;
+}
+
+.spacer {
+  display: none;
+  padding: 0 15px;
+}
+
+@media screen and (min-width: 768px) {
+  .anchor span {
+    display: inline !important;
+  }
+}
diff --git a/starters/apps/playground/src/components/starter/footer/footer.tsx b/starters/apps/playground-starter/src/components/starter/footer/footer.tsx
similarity index 74%
rename from starters/apps/playground/src/components/starter/footer/footer.tsx
rename to starters/apps/playground-starter/src/components/starter/footer/footer.tsx
index 8e89cb99878..c4f75793c39 100644
--- a/starters/apps/playground/src/components/starter/footer/footer.tsx
+++ b/starters/apps/playground-starter/src/components/starter/footer/footer.tsx
@@ -8,11 +8,11 @@ export default component$(() => {
   return (
     <footer>
       <div class="container">
-        <a href="https://www.builder.io/" target="_blank" class={styles.anchor}>
-          <span>Made with ♡ by Builder.io</span>
+        <p class={styles.anchor}>
+          <span>Made with ♡ by the Qwik Team</span>
           <span class={styles.spacer}>|</span>
           <span>{serverTime.value.date}</span>
-        </a>
+        </p>
       </div>
     </footer>
   );
diff --git a/starters/apps/playground/src/components/starter/gauge/gauge.module.css b/starters/apps/playground-starter/src/components/starter/gauge/gauge.module.css
similarity index 100%
rename from starters/apps/playground/src/components/starter/gauge/gauge.module.css
rename to starters/apps/playground-starter/src/components/starter/gauge/gauge.module.css
diff --git a/starters/apps/playground/src/components/starter/gauge/index.tsx b/starters/apps/playground-starter/src/components/starter/gauge/index.tsx
similarity index 100%
rename from starters/apps/playground/src/components/starter/gauge/index.tsx
rename to starters/apps/playground-starter/src/components/starter/gauge/index.tsx
diff --git a/starters/apps/playground-starter/src/components/starter/header/header.module.css b/starters/apps/playground-starter/src/components/starter/header/header.module.css
new file mode 100644
index 00000000000..c74aa7edbe6
--- /dev/null
+++ b/starters/apps/playground-starter/src/components/starter/header/header.module.css
@@ -0,0 +1,44 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.logo {
+  display: inline-block;
+}
+.logo a {
+  display: block;
+}
+
+.header ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  gap: 30px;
+}
+
+.header li {
+  display: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0.7rem;
+}
+
+.header li a {
+  color: white;
+  display: inline-block;
+  padding: 0;
+  text-decoration: none;
+}
+
+.header li a:hover {
+  color: var(--qwik-light-blue);
+}
+
+@media (min-width: 450px) {
+  .header li {
+    display: inline-block;
+  }
+}
diff --git a/starters/apps/playground-starter/src/components/starter/header/header.tsx b/starters/apps/playground-starter/src/components/starter/header/header.tsx
new file mode 100644
index 00000000000..680013eaa25
--- /dev/null
+++ b/starters/apps/playground-starter/src/components/starter/header/header.tsx
@@ -0,0 +1,43 @@
+import { component$ } from "@builder.io/qwik";
+import { QwikLogo } from "../icons/qwik";
+import styles from "./header.module.css";
+
+export default component$(() => {
+  return (
+    <header class={styles.header}>
+      <div class={["container", styles.wrapper]}>
+        <div class={styles.logo}>
+          <a href="/" title="qwik">
+            <QwikLogo height={50} width={143} />
+          </a>
+        </div>
+        <ul>
+          <li>
+            <a
+              href="https://qwik.dev/docs/components/overview/"
+              target="_blank"
+            >
+              Docs
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://qwik.dev/examples/introduction/hello-world/"
+              target="_blank"
+            >
+              Examples
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://qwik.dev/tutorial/welcome/overview/"
+              target="_blank"
+            >
+              Tutorials
+            </a>
+          </li>
+        </ul>
+      </div>
+    </header>
+  );
+});
diff --git a/starters/apps/playground-starter/src/components/starter/hero/hero.module.css b/starters/apps/playground-starter/src/components/starter/hero/hero.module.css
new file mode 100644
index 00000000000..1f968a771be
--- /dev/null
+++ b/starters/apps/playground-starter/src/components/starter/hero/hero.module.css
@@ -0,0 +1,43 @@
+.hero {
+  display: flex;
+  vertical-align: middle;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  height: 450px;
+  justify-content: center;
+  gap: 40px;
+}
+
+.hero-image {
+  width: 100%;
+  position: absolute;
+  height: auto;
+  object-fit: cover;
+  z-index: -1;
+  opacity: 0.2;
+  pointer-events: none;
+}
+
+.hero p {
+  color: white;
+  margin: 0;
+  font-size: 1rem;
+}
+
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+}
+
+@media screen and (min-width: 768px) {
+  .hero {
+    gap: 60px;
+    height: 500px;
+  }
+
+  .hero p {
+    font-size: 1.3rem;
+  }
+}
diff --git a/starters/apps/playground/src/components/starter/hero/hero.tsx b/starters/apps/playground-starter/src/components/starter/hero/hero.tsx
similarity index 100%
rename from starters/apps/playground/src/components/starter/hero/hero.tsx
rename to starters/apps/playground-starter/src/components/starter/hero/hero.tsx
diff --git a/starters/apps/playground-starter/src/components/starter/icons/qwik.tsx b/starters/apps/playground-starter/src/components/starter/icons/qwik.tsx
new file mode 100644
index 00000000000..4f94b0883bb
--- /dev/null
+++ b/starters/apps/playground-starter/src/components/starter/icons/qwik.tsx
@@ -0,0 +1,44 @@
+export const QwikLogo = ({
+  width = 100,
+  height = 35,
+}: {
+  width?: number;
+  height?: number;
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 167 53"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M81.9545 46.5859H75.5513V35.4045C73.4363 36.8579 71.0496 37.5749 68.4884 37.5749C65.0151 37.5749 62.4344 36.6253 60.8239 34.6487C59.2134 32.6915 58.3984 29.2034 58.3984 24.2231C58.3984 19.1266 59.3492 15.5997 61.2702 13.5456C63.23 11.4721 66.3734 10.4644 70.7004 10.4644C74.7946 10.4644 78.5201 11.0264 81.9545 12.131V46.5859ZM75.5513 16.278C74.096 15.8323 72.4661 15.6191 70.7004 15.6191C68.5272 15.6191 66.9749 16.1811 66.1017 17.3244C65.2479 18.4871 64.7823 20.6962 64.7823 23.9712C64.7823 27.0524 65.1897 29.1065 66.0435 30.2304C66.8973 31.335 68.3719 31.897 70.5452 31.897C73.3781 31.897 75.5513 30.7343 75.5513 29.2809V16.278Z"
+      fill="white"
+    />
+    <path
+      d="M91.133 11.1426C93.4033 17.4406 95.3242 23.7386 96.993 30.0948C99.205 23.5836 101.087 17.2856 102.542 11.1426H108.15C110.265 17.4406 112.031 23.7386 113.447 30.0948C115.97 23.196 117.949 16.8787 119.404 11.1426H125.71C123.033 20.173 120.064 28.777 116.785 36.8966H109.256C108.402 32.3039 107.044 26.7617 105.22 20.1536C104.056 25.2889 102.445 30.8893 100.33 36.8966H92.8018C90.2793 27.5174 87.5434 18.9522 84.6328 11.1426H91.133Z"
+      fill="white"
+    />
+    <path
+      d="M132.832 7.55758C129.999 7.55758 129.203 6.85996 129.203 3.97257C129.203 1.39523 130.018 0.794495 132.832 0.794495C135.665 0.794495 136.46 1.39523 136.46 3.97257C136.46 6.85996 135.665 7.55758 132.832 7.55758ZM129.649 11.1426H136.053V36.8966H129.649V11.1426Z"
+      fill="white"
+    />
+    <path
+      d="M166.303 11.1426C161.763 17.5956 158.581 21.5295 156.815 22.9441C158.27 23.8937 162.17 28.8933 167.002 36.916H159.628C153.613 27.7887 150.742 23.8549 149.325 23.2542V36.916H142.922V0H149.325V23.2348C150.78 22.169 153.963 18.1382 158.872 11.1426H166.303Z"
+      fill="white"
+    />
+    <path
+      d="M40.973 52.5351L32.0861 43.6985L31.9503 43.7179V43.621L13.0511 24.9595L17.708 20.4637L14.9721 4.76715L1.99103 20.8513C-0.220992 23.0798 -0.628467 26.7036 0.962635 29.3778L9.07337 42.8265C10.3152 44.9 12.566 46.1402 14.9915 46.1208L19.0081 46.082L40.973 52.5351Z"
+      fill="#18B6F6"
+    />
+    <path
+      d="M45.8232 20.5411L44.038 17.2468L43.1066 15.5609L42.738 14.902L42.6992 14.9408L37.8094 6.47238C36.587 4.34075 34.2974 3.02301 31.8137 3.04239L27.5255 3.15865L14.7384 3.19741C12.313 3.21679 10.101 4.49577 8.87853 6.56927L1.09766 21.9945L15.0101 4.72831L33.2496 24.7656L30.0091 28.0406L31.9495 43.7178L31.9689 43.679V43.7178H31.9301L31.9689 43.7565L33.4824 45.2293L40.8364 52.4187C41.1469 52.7094 41.6514 52.3606 41.4379 51.9924L36.8975 43.0589L44.8142 28.4282L45.0664 28.1375C45.1634 28.0212 45.2604 27.905 45.3381 27.7887C46.8904 25.6764 47.1038 22.8472 45.8232 20.5411Z"
+      fill="#AC7EF4"
+    />
+    <path
+      d="M33.3076 24.6882L15.0099 4.74774L17.61 20.3668L12.9531 24.882L31.9105 43.6985L30.203 28.0794L33.3076 24.6882Z"
+      fill="white"
+    />
+  </svg>
+);
diff --git a/starters/apps/playground-starter/src/components/starter/infobox/infobox.module.css b/starters/apps/playground-starter/src/components/starter/infobox/infobox.module.css
new file mode 100644
index 00000000000..b70391297bd
--- /dev/null
+++ b/starters/apps/playground-starter/src/components/starter/infobox/infobox.module.css
@@ -0,0 +1,23 @@
+.infobox {
+  color: white;
+  font-size: 0.8rem;
+  line-height: 2;
+  margin: 0 0 40px;
+}
+
+.infobox h3 {
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0 0 15px;
+  padding: 0;
+}
+
+.infobox li {
+  line-height: 2.5;
+}
+
+@media screen and (min-width: 600px) {
+  .infobox {
+    margin: 0;
+  }
+}
diff --git a/starters/apps/playground-starter/src/components/starter/infobox/infobox.tsx b/starters/apps/playground-starter/src/components/starter/infobox/infobox.tsx
new file mode 100644
index 00000000000..f6f66e423d8
--- /dev/null
+++ b/starters/apps/playground-starter/src/components/starter/infobox/infobox.tsx
@@ -0,0 +1,13 @@
+import { Slot, component$ } from "@builder.io/qwik";
+import styles from "./infobox.module.css";
+
+export default component$(() => {
+  return (
+    <div class={styles.infobox}>
+      <h3>
+        <Slot name="title" />
+      </h3>
+      <Slot />
+    </div>
+  );
+});
diff --git a/starters/apps/playground/src/components/starter/next-steps/next-steps.module.css b/starters/apps/playground-starter/src/components/starter/next-steps/next-steps.module.css
similarity index 100%
rename from starters/apps/playground/src/components/starter/next-steps/next-steps.module.css
rename to starters/apps/playground-starter/src/components/starter/next-steps/next-steps.module.css
diff --git a/starters/apps/playground/src/components/starter/next-steps/next-steps.tsx b/starters/apps/playground-starter/src/components/starter/next-steps/next-steps.tsx
similarity index 100%
rename from starters/apps/playground/src/components/starter/next-steps/next-steps.tsx
rename to starters/apps/playground-starter/src/components/starter/next-steps/next-steps.tsx
diff --git a/starters/apps/playground-starter/src/global.css b/starters/apps/playground-starter/src/global.css
new file mode 100644
index 00000000000..f4335aaa886
--- /dev/null
+++ b/starters/apps/playground-starter/src/global.css
@@ -0,0 +1,46 @@
+/**
+ * WHAT IS THIS FILE?
+ *
+ * Globally applied styles. No matter which components are in the page or matching route,
+ * the styles in here will be applied to the Document, without any sort of CSS scoping.
+ *
+ */
+
+:root {
+  --qwik-dark-blue: #006ce9;
+  --qwik-light-blue: #18b6f6;
+  --qwik-light-purple: #ac7ff4;
+  --qwik-dark-purple: #713fc2;
+  --qwik-dirty-black: #1d2033;
+  --qwik-dark-background: #151934;
+  --qwik-dark-text: #ffffff;
+}
+
+html {
+  line-height: 1;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+}
diff --git a/starters/apps/playground-starter/src/media/thunder.png b/starters/apps/playground-starter/src/media/thunder.png
new file mode 100644
index 00000000000..a6398858eff
Binary files /dev/null and b/starters/apps/playground-starter/src/media/thunder.png differ
diff --git a/starters/apps/playground-starter/src/root.tsx b/starters/apps/playground-starter/src/root.tsx
new file mode 100644
index 00000000000..f6c88a89cea
--- /dev/null
+++ b/starters/apps/playground-starter/src/root.tsx
@@ -0,0 +1,38 @@
+import { component$ } from "@builder.io/qwik";
+import { isDev } from "@builder.io/qwik/build";
+import {
+  QwikCityProvider,
+  RouterOutlet,
+  ServiceWorkerRegister,
+} from "@builder.io/qwik-city";
+import { RouterHead } from "./components/router-head/router-head";
+
+import "./global.css";
+
+export default component$(() => {
+  /**
+   * The root of a QwikCity site always start with the <QwikCityProvider> component,
+   * immediately followed by the document's <head> and <body>.
+   *
+   * Don't remove the `<head>` and `<body>` elements.
+   */
+
+  return (
+    <QwikCityProvider>
+      <head>
+        <meta charset="utf-8" />
+        {!isDev && (
+          <link
+            rel="manifest"
+            href={`${import.meta.env.BASE_URL}manifest.json`}
+          />
+        )}
+        <RouterHead />
+        {!isDev && <ServiceWorkerRegister />}
+      </head>
+      <body lang="en">
+        <RouterOutlet />
+      </body>
+    </QwikCityProvider>
+  );
+});
diff --git a/starters/apps/playground/src/routes/demo/flower/flower.css b/starters/apps/playground-starter/src/routes/demo/flower/flower.css
similarity index 100%
rename from starters/apps/playground/src/routes/demo/flower/flower.css
rename to starters/apps/playground-starter/src/routes/demo/flower/flower.css
diff --git a/starters/apps/playground/src/routes/demo/flower/index.tsx b/starters/apps/playground-starter/src/routes/demo/flower/index.tsx
similarity index 100%
rename from starters/apps/playground/src/routes/demo/flower/index.tsx
rename to starters/apps/playground-starter/src/routes/demo/flower/index.tsx
diff --git a/starters/apps/playground/src/routes/demo/todolist/index.tsx b/starters/apps/playground-starter/src/routes/demo/todolist/index.tsx
similarity index 100%
rename from starters/apps/playground/src/routes/demo/todolist/index.tsx
rename to starters/apps/playground-starter/src/routes/demo/todolist/index.tsx
diff --git a/starters/apps/playground/src/routes/demo/todolist/todolist.module.css b/starters/apps/playground-starter/src/routes/demo/todolist/todolist.module.css
similarity index 100%
rename from starters/apps/playground/src/routes/demo/todolist/todolist.module.css
rename to starters/apps/playground-starter/src/routes/demo/todolist/todolist.module.css
diff --git a/starters/apps/playground/src/routes/index.tsx b/starters/apps/playground-starter/src/routes/index.tsx
similarity index 100%
rename from starters/apps/playground/src/routes/index.tsx
rename to starters/apps/playground-starter/src/routes/index.tsx
diff --git a/starters/apps/playground/src/routes/layout.tsx b/starters/apps/playground-starter/src/routes/layout.tsx
similarity index 100%
rename from starters/apps/playground/src/routes/layout.tsx
rename to starters/apps/playground-starter/src/routes/layout.tsx
diff --git a/starters/apps/playground-starter/src/routes/service-worker.ts b/starters/apps/playground-starter/src/routes/service-worker.ts
new file mode 100644
index 00000000000..a10ab364265
--- /dev/null
+++ b/starters/apps/playground-starter/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.dev/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;
diff --git a/starters/apps/playground-starter/src/routes/styles.css b/starters/apps/playground-starter/src/routes/styles.css
new file mode 100644
index 00000000000..c7f308e1da9
--- /dev/null
+++ b/starters/apps/playground-starter/src/routes/styles.css
@@ -0,0 +1,214 @@
+/* THIS FILE IS JUST FOR EXAMPLES, DELETE IT IF YOU DON'T NEED IT */
+
+/* SHELL ---------------------------------------- */
+html {
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
+}
+
+body {
+  background: var(--qwik-dark-background);
+  color: var(--qwik-dark-text);
+  overflow-x: hidden;
+}
+
+/* HEADINGS ------------------------------------- */
+h1,
+h2,
+h3 {
+  color: white;
+  margin: 0;
+}
+
+h1 {
+  font-size: 3.2rem;
+  text-align: center;
+}
+h1 .highlight,
+h3 .highlight {
+  color: var(--qwik-light-blue);
+}
+
+h2 {
+  font-weight: 400;
+  font-size: 2.4rem;
+}
+h2 .highlight {
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 2rem;
+}
+
+@media screen and (min-width: 768px) {
+  h1 {
+    font-size: 5rem;
+  }
+  h2 {
+    font-size: 3.4rem;
+  }
+  h3 {
+    font-size: 3rem;
+  }
+}
+
+/* TAGS ----------------------------------------- */
+a {
+  text-decoration: none;
+  color: var(--qwik-light-blue);
+}
+
+code {
+  background: rgba(230, 230, 230, 0.3);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+/* CONTAINER ------------------------------------ */
+.container {
+  margin: 0 auto;
+  padding: 30px 40px;
+}
+.container.container-purple {
+  background: var(--qwik-light-purple);
+}
+.container.container-dark {
+  background: var(--qwik-dark-background);
+  color: var(--qwik-dark-text);
+}
+.container.container-center {
+  text-align: center;
+}
+.container.container-flex {
+  /* does nothing on mobile */
+}
+.container.container-spacing-xl {
+  padding: 50px 40px;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    padding: 60px 80px;
+  }
+  .container.container-spacing-xl {
+    padding: 100px 60px;
+  }
+  .container.container-flex {
+    display: flex;
+    justify-content: center;
+    gap: 60px;
+  }
+}
+
+/* BUTTONS -------------------------------------- */
+a.button,
+button {
+  background: var(--qwik-light-blue);
+  border: none;
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 15px 20px;
+  text-align: center;
+}
+
+a.button.button-dark,
+button.button-dark {
+  background: var(--qwik-dirty-black);
+}
+
+a.button.button-small,
+button.button-small {
+  padding: 15px 25px;
+}
+
+@media screen and (min-width: 768px) {
+  a.button,
+  button {
+    font-size: 1rem;
+    padding: 23px 35px;
+  }
+}
+
+/* DESIGN --------------------------------------- */
+.ellipsis {
+  position: absolute;
+  top: 100px;
+  left: -100px;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(
+    57.58% 57.58% at 48.79% 42.42%,
+    rgba(24, 180, 244, 0.5) 0%,
+    rgba(46, 55, 114, 0) 63.22%
+  );
+  transform: rotate(5deg);
+  opacity: 0.5;
+  z-index: -1;
+}
+.ellipsis.ellipsis-purple {
+  top: 1350px;
+  left: -100px;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(172, 127, 244, 0.5) 0%,
+    rgba(21, 25, 52, 0) 100%
+  );
+  transform: rotate(-5deg);
+}
+
+@media screen and (min-width: 768px) {
+  .ellipsis {
+    top: -100px;
+    left: 350px;
+    width: 1400px;
+    height: 800px;
+  }
+  .ellipsis.ellipsis-purple {
+    top: 1300px;
+    left: -200px;
+  }
+}
+
+/* used icon pack: https://www.svgrepo.com/collection/phosphor-thin-icons */
+.icon:before {
+  width: 18px;
+  height: 18px;
+  content: "";
+  display: inline-block;
+  margin-right: 20px;
+  position: relative;
+  top: 2px;
+}
+
+.icon-cli:before {
+  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M122.499 124.87646a4.00053 4.00053 0 0 1 0 6.24708l-40 32a4.0002 4.0002 0 0 1-4.998-6.24708L113.59668 128 77.501 99.12354a4.0002 4.0002 0 0 1 4.998-6.24708ZM175.99414 156h-40a4 4 0 0 0 0 8h40a4 4 0 1 0 0-8ZM228 56.48535v143.0293A12.49909 12.49909 0 0 1 215.51465 212H40.48535A12.49909 12.49909 0 0 1 28 199.51465V56.48535A12.49909 12.49909 0 0 1 40.48535 44h175.0293A12.49909 12.49909 0 0 1 228 56.48535Zm-8 0A4.49023 4.49023 0 0 0 215.51465 52H40.48535A4.49023 4.49023 0 0 0 36 56.48535v143.0293A4.49023 4.49023 0 0 0 40.48535 204h175.0293A4.49023 4.49023 0 0 0 220 199.51465Z'/%3E%3C/svg%3E");
+}
+
+.icon-apps:before {
+  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M216 44.00586H40a12.01375 12.01375 0 0 0-12 12v144a12.01375 12.01375 0 0 0 12 12H216a12.01375 12.01375 0 0 0 12-12v-144A12.01375 12.01375 0 0 0 216 44.00586Zm4 156a4.00458 4.00458 0 0 1-4 4H40a4.00458 4.00458 0 0 1-4-4v-144a4.00458 4.00458 0 0 1 4-4H216a4.00458 4.00458 0 0 1 4 4Zm-144-116a8 8 0 1 1-8-8A7.99977 7.99977 0 0 1 76 84.00586Zm40 0a8 8 0 1 1-8-8A7.99977 7.99977 0 0 1 116 84.00586Z'/%3E%3C/svg%3E");
+}
+
+.icon-community:before {
+  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M246.40381 143.19434a4.00061 4.00061 0 0 1-5.60108-.7959A55.57857 55.57857 0 0 0 196 120a4 4 0 0 1 0-8 28 28 0 1 0-27.50732-33.26074 4.00013 4.00013 0 0 1-7.85987-1.49219 36.00191 36.00191 0 1 1 54.06494 37.50513 63.58068 63.58068 0 0 1 32.50147 22.84155A3.99993 3.99993 0 0 1 246.40381 143.19434Zm-57.24268 71.05273a3.9998 3.9998 0 1 1-7.1914 3.50391 60.02582 60.02582 0 0 0-107.93946 0 3.9998 3.9998 0 1 1-7.1914-3.50391 67.56008 67.56008 0 0 1 40.90625-35.20581 44 44 0 1 1 40.50976 0A67.56139 67.56139 0 0 1 189.16113 214.24707ZM128 176a36 36 0 1 0-36-36A36.04061 36.04061 0 0 0 128 176ZM60 112A28 28 0 1 1 87.50732 78.73828a3.99989 3.99989 0 1 0 7.85938-1.49219A36.00177 36.00177 0 1 0 41.30225 114.7522 63.5829 63.5829 0 0 0 8.79883 137.5957a4 4 0 1 0 6.39648 4.80469A55.58072 55.58072 0 0 1 60 120a4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
+}