Davidasix/web mvp

apps/web/astro.config.mjs

@@ -1,5 +1,14 @@
 // @ts-check
 import { defineConfig } from "astro/config";
+import tailwindcss from "@tailwindcss/vite";
+import sitemap from "@astrojs/sitemap";
+import { site } from "./src/lib/site.ts";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  site: site.url,
+  integrations: [sitemap()],
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});

apps/web/package.json

@@ -10,13 +10,16 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
-    "check:types": "astro check",
+    "check:types": "astro check --minimumFailingSeverity hint",
     "check:lint": "eslint --max-warnings 0"
   },
   "dependencies": {
+    "@astrojs/sitemap": "^3.7.2",
     "@midwifes-notebook/server": "workspace:*",
+    "@tailwindcss/vite": "^4.3.0",
     "@trpc/client": "^11.12.0",
-    "astro": "^6.3.5"
+    "astro": "^6.3.5",
+    "tailwindcss": "^4.2.1"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.9",

apps/web/src/components/Footer.astro

@@ -0,0 +1,37 @@
+---
+
+---
+
+<footer class="border-t border-border bg-background py-8">
+  <div
+    class="mx-auto flex max-w-6xl flex-col items-center justify-between gap-4 px-6 sm:flex-row"
+  >
+    <div class="flex items-center gap-2">
+      <img
+        src="/logo.svg"
+        alt="Midwife's Notebook logo"
+        width="22"
+        height="22"
+      />
+      <span class="font-heading text-sm font-medium text-foreground"
+        >Midwife's Notebook</span
+      >
+    </div>
+    <p class="text-xs text-muted-foreground">
+      A client management app for midwives and doulas. Launching August 2026.
+    </p>
+    <p class="text-xs text-muted-foreground">
+      Created by{" "}
+      <a
+        href="https://davidasix.com?utm_source=midwifes-notebook&utm_medium=footer&utm_campaign=created-by"
+        aria-label="Developers Website (Opens in new tab)"
+        target="_blank"
+        rel="noopener noreferrer"
+        class="underline underline-offset-2 transition-colors hover:text-foreground"
+      >
+        davidasix
+      </a>{" "}
+      in <span role="img" aria-label="Canada">🇨🇦</span>
+    </p>
+  </div>
+</footer>

apps/web/src/components/Navigation.astro

@@ -0,0 +1,22 @@
+---
+
+---
+
+<header
+  class="sticky top-0 z-50 border-b border-border/60 bg-background/90 backdrop-blur-sm"
+>
+  <div class="mx-auto flex max-w-6xl items-center justify-between px-6 py-4">
+    <div class="flex items-center gap-2.5">
+      <img
+        src="/logo.svg"
+        alt="Midwife's Notebook logo"
+        width="28"
+        height="28"
+      />
+      <span class="font-heading text-lg font-semibold text-primary">
+        Midwife's Notebook
+      </span>
+    </div>
+    <span class="text-sm text-muted-foreground">Coming August 2026</span>
+  </div>
+</header>

apps/web/src/components/PhoneFrame.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  src: string;
+  alt: string;
+  class?: string;
+}
+const { src, alt, class: className } = Astro.props;
+---
+
+<div class:list={["relative mx-auto w-55", className]}>
+  <div
+    class="relative overflow-hidden rounded-[2.5rem] border-4 border-foreground/15 bg-foreground/5 shadow-2xl"
+  >
+    <div class="relative overflow-hidden rounded-[2.2rem]">
+      <img
+        src={src}
+        alt={alt}
+        width="600"
+        height="1200"
+        class="w-full object-cover object-top"
+      />
+    </div>
+  </div>
+  <div
+    class="pointer-events-none absolute inset-0 rounded-[2.5rem] ring-1 ring-inset ring-white/10"
+  >
+  </div>
+</div>

apps/web/src/components/SectionLabel.astro

@@ -0,0 +1,15 @@
+---
+interface Props {
+  class?: string;
+}
+const { class: className } = Astro.props;
+---
+
+<p
+  class:list={[
+    "text-xs font-semibold uppercase tracking-[0.15em] text-muted-foreground",
+    className,
+  ]}
+>
+  <slot />
+</p>

apps/web/src/components/StoreButton.astro

@@ -0,0 +1,46 @@
+---
+import AppleLogo from "../assets/apple-logo.svg";
+import GooglePlayIcon from "../assets/google-play-icon.svg";
+
+interface Props {
+  store: "apple" | "google";
+  href?: string;
+}
+
+const { store, href } = Astro.props;
+
+const data = {
+  apple: { label: "Download on the", storeName: "App Store" },
+  google: { label: "Get it on", storeName: "Google Play" },
+} as const;
+
+const { label, storeName } = data[store];
+const disabled = !href;
+---
+
+<a
+  href={disabled ? undefined : href}
+  aria-disabled={disabled}
+  aria-label={disabled ? `${storeName} — coming soon` : `${label} ${storeName}`}
+  class:list={[
+    "flex h-14 w-48 select-none items-center gap-3 rounded-xl bg-foreground px-4",
+    disabled
+      ? "pointer-events-none grayscale opacity-80"
+      : "transition-opacity hover:opacity-80",
+  ]}
+>
+  {
+    store === "apple" && (
+      <AppleLogo class="h-7 w-auto shrink-0" fill="white" aria-hidden="true" />
+    )
+  }
+  {
+    store === "google" && (
+      <GooglePlayIcon class="h-7 w-auto shrink-0" aria-hidden="true" />
+    )
+  }
+  <div class="flex flex-col leading-none text-background">
+    <span class="text-[10px] opacity-80">{label}</span>
+    <span class="text-base font-semibold">{storeName}</span>
+  </div>
+</a>