diff --git a/apps/web/astro.config.mjs b/apps/web/astro.config.mjs index 3779032..f901e2e 100644 --- a/apps/web/astro.config.mjs +++ b/apps/web/astro.config.mjs @@ -2,12 +2,13 @@ import { defineConfig } from "astro/config"; import tailwindcss from "@tailwindcss/vite"; import sitemap from "@astrojs/sitemap"; +import icon from "astro-icon"; import { site } from "./src/lib/site.ts"; // https://astro.build/config export default defineConfig({ site: site.url, - integrations: [sitemap()], + integrations: [sitemap(), icon()], vite: { plugins: [tailwindcss()], }, diff --git a/apps/web/package.json b/apps/web/package.json index ad46398..732b115 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -19,11 +19,13 @@ "@tailwindcss/vite": "^4.3.0", "@trpc/client": "^11.12.0", "astro": "^6.3.5", + "astro-icon": "^1.1.5", "tailwindcss": "^4.2.1" }, "devDependencies": { "@astrojs/check": "^0.9.9", "@eslint/js": "^10.0.1", + "@iconify-json/lucide": "^1.2.108", "eslint": "^10.4.0", "eslint-plugin-astro": "^1.7.0", "typescript": "^6.0.3", diff --git a/apps/web/src/pages/index.astro b/apps/web/src/pages/index.astro index b67dbb7..41fdd2e 100644 --- a/apps/web/src/pages/index.astro +++ b/apps/web/src/pages/index.astro @@ -4,6 +4,7 @@ import PhoneFrame from "../components/PhoneFrame.astro"; import SectionLabel from "../components/SectionLabel.astro"; import StoreButton from "../components/StoreButton.astro"; import WaitlistForm from "../components/WaitlistForm.astro"; +import { Icon } from "astro-icon/components"; import { faqPageSchema } from "../lib/schema"; const features = [ @@ -11,25 +12,25 @@ const features = [ title: "Client Records", description: "A full client register with pregnancy status, clinical details, partner info, GBS status, and care notes.", - icon: "users", + icon: "lucide:users", }, { title: "Clinical Tools", description: "LMP, gestational age, and EDD calculators that work in both directions. Enter any one value and the rest are derived instantly.", - icon: "wrench", + icon: "lucide:wrench", }, { title: "Due Date Calendar", description: "A continuous scrolling calendar showing upcoming EDDs and delivery dates at a glance. Tap any date to see the relevant clients.", - icon: "calendar", + icon: "lucide:calendar", }, { title: "Practice Statistics", description: "Delivery counts, GBS rates, feeding breakdowns, and more — derived entirely from your local records. No data leaves your device.", - icon: "chart", + icon: "lucide:bar-chart-2", }, ] as const; @@ -187,85 +188,12 @@ const faqs = [ features.map((f) => (
- {f.icon === "users" && ( - - )} - {f.icon === "wrench" && ( - - )} - {f.icon === "calendar" && ( - - )} - {f.icon === "chart" && ( - - )} +

{f.title} @@ -313,23 +241,13 @@ const faqs = [
- + />

Clinical tools screen

@@ -356,28 +274,13 @@ const faqs = [
- + />

Calendar screen

Screenshot coming soon @@ -481,22 +384,14 @@ const faqs = [ data-accordion-trigger > {faq.q} - + />

` tags are **never** written by hand in this codebase. All SVG usage falls into one of two patterns: + +**1. UI icons — use `astro-icon`** + +Icons are sourced from the **Lucide** Iconify pack (`@iconify-json/lucide`) via the `` component from `astro-icon/components`. Reference icons as `"lucide:"`. Browse [lucide.dev](https://lucide.dev) to find names. + +```astro +--- +import { Icon } from "astro-icon/components"; +--- + +