Instruction

How to Update Text and Images

Updating Text

All repeating content lives in typed data files under src/data/, so you can edit copy without touching markup.

1. Pick the right data file for the section you want to change:
   • nav.ts — header and navigation links
   • features.ts — feature cards
   • howItWorks.ts — the step-by-step section
   • pricing.ts — plan names, prices, and feature lists
   • useCases.ts — use-case tabs
   • testimonials.ts — quotes and authors
   • faqs.ts — question and answer pairs
2. Edit the values in the exported array. TypeScript will flag a typo in a field name straight away.
3. For one-off headings and paragraphs, edit the section component directly in src/components/sections/.

Updating Images

Content images live in src/assets/images/ and are rendered with Astro's <Image /> component. Astro processes them at build time — converting to WebP, adding width and height so the page never jumps, and giving each file a hashed name browsers can cache forever.

1. Drop your new file into src/assets/images/.
2. Import it at the top of the component: import photo from '@/assets/images/your-file.webp'; then render <Image src={photo} alt="…" />. Reusing the original filename means no code change at all.
3. Update the alt text to describe the new image. Leave it empty (alt="") only when the image is purely decorative. You do not need to set width/height — Astro reads them from the file.
4. Supply images at roughly twice their display size. Astro will shrink and re-encode, but it never upscales, so a small source file stays soft on high-resolution screens.
5. Prefer WebP or JPG for photography and SVG for logos and icons.

The exception: favicons, the web-clip icon, and the social share image live in public/images/ and are referenced by plain URL, because their addresses must stay fixed and unhashed for browsers and social crawlers. Videos and fonts work the same way, in public/videos/ and public/fonts/.

Product Mockups Are Code, Not Images

The app-screenshot visuals — feature cards, the three "How it Works" steps, the use-case tabs, and the 404/401 illustrations — are built in markup, not bitmap files. They stay crisp at any screen size and pick up your accent color automatically when you change the design tokens.

1. To change what a mockup shows, edit the matching component in src/components/ui/: FeatureMockup.astro, WorkMockup.astro, UseCaseMockup.astro, or UtilityIllustration.astro.
2. To swap which mockup a card uses, change the mockup field in the matching data file (for example features.ts) — TypeScript lists the valid variant names.
3. To use a real screenshot instead, replace the component call with a normal <img> tag in the section component.

How to Replace an Icon (SVG)

Icons are inlined as raw <svg> markup rather than loaded as image files, so they inherit color from CSS and add no extra network requests.

1. Find the icon in the component you want to change — look for an <svg> element, usually wrapped in a div with a class like button-icon or social-icon.
2. Replace the markup from <svg> to </svg> with your own icon.
3. Keep fill="currentColor" (or stroke="currentColor") on the paths. This is what lets the icon pick up the surrounding text color and animate on hover.
4. Match the width, height, and viewBox to the original so the layout stays intact.
5. Note the casing: in Astro use viewBox, not the lowercase viewbox that some exporters produce.
6. Reusing an icon in several places? Move it into its own component under src/components/ui/ and import it where needed.

How to Adjust Animations and Interactions

Motion is Tailwind utility classes (transition, duration-*, ease-*) plus the shared timing tokens in tokens.css (--dur-fast, --dur-base, --dur-slow, --ease-out), backed by a small amount of vanilla JavaScript. There is no animation library and no framework runtime to configure.

CSS Transitions

1. Tune a timing token in src/styles/tokens.css to change duration or easing everywhere it's referenced, or override a single element's duration-[var(--dur-base)] class directly in its component.
2. Hover states use Tailwind's hover: variant right on the element, e.g. hover:border-signal-500/60.

Interactive Components

Each interactive piece keeps its script in a <script> block at the bottom of its own component file:

• Pricing toggle — PricingSection.astro toggles an is-active class between the monthly and yearly tabs and shows the matching prices.
• Use-case tabs — UseCasesSection.astro swaps the active tab panel.
• FAQ accordion — FAQSection.astro toggles aria-expanded and animates the answer panel height.
• Mobile navigation — Header.astro opens and closes the menu.

Astro scopes and bundles these scripts automatically. To disable an effect, remove or comment out its <script> block — the markup stays fully usable without it.

Respecting Reduced Motion

To honour a visitor's system preference, wrap your motion in a media query:

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

How to Update Page SEO

Meta tags, Open Graph tags, and Twitter card tags are all generated by src/layouts/BaseLayout.astro from the props each page passes in.

1. Open the page you want to edit in src/pages/.
2. Update the props on the <BaseLayout> tag:
   • title — the browser tab title and search result headline.
   • description — the meta description, also reused for the OG and Twitter descriptions.
3. Replace the share image at public/images/og-image.webp, keeping the filename so no code change is needed. Recommended size is 1200 × 630 pixels.
4. Set your production domain in the site field of astro.config.mjs. The @astrojs/sitemap integration uses it to generate sitemap-index.xml at build time, and it makes the canonical and OG URLs absolute.
5. Swap the favicon by replacing public/images/favicon.png and webclip.png.
6. Run npm run build and check the generated dist/ HTML to confirm the tags render as expected.

How to Work with Video

Background videos use native HTML <video> elements with two sources, so browsers pick whichever format they support best.

1. Add your files to public/videos/ in both formats — an .mp4 (H.264) and a .webm.
2. Update the two <source> tags in the section component to point at your files.
3. Keep the playback attributes. autoplay, loop, muted, and playsinline are all required together — without muted and playsinline, mobile browsers refuse to autoplay.
4. Set a poster image so a still frame appears while the video loads.
5. Keep files small. Aim for a few megabytes per background loop; compress before you commit, since these files ship as-is from public/.

Adding a Third-Party Embed

For YouTube or Vimeo, paste the provider's <iframe> snippet directly into the component and add loading="lazy" so it does not block the initial page render.

Using a Section in Another Project

Every section is self-contained — none of them reach into a layout or depend on global class names. What they do depend on is the design tokens, because they are styled with tokens rather than hard-coded colors. Copy a section into a project without those tokens and it renders unstyled. Three things have to travel with it.

1. Tailwind CSS v4. Install tailwindcss and @tailwindcss/vite, then register the plugin in astro.config.mjs under vite.plugins.
2. The @theme block from src/styles/tokens.css. Sections use utilities like bg-ink-950, text-paper-400, border-line, shadow-glow, and font-display — none of which exist in stock Tailwind. The README lists a trimmed-down copy-paste version.
3. The @/ path alias. Sections import from @/components/… and @/data/…. Add the alias to your tsconfig.json or rewrite those imports as relative paths.

For the Satoshi headings, also copy public/fonts/ and the three @font-face rules at the top of tokens.css. Skip it and headings simply fall back to your own font.

What Else a Section Might Need

1. A data file. Most sections read their content from src/data/ — features.ts, pricing.ts, faqs.ts, and so on. Copy that file too, or replace the import with a local array. HeroSection, CTASection, BreadcrumbSection, and AuthShowcase need no data file.
2. A UI component. Sections may pull in Button.astro, SectionHeading.astro, or one of the SVG mockup components from src/components/ui/.
3. An image. HeroSection and AuthShowcase import from src/assets/images/.
4. Nothing for the JavaScript. The pricing toggle, FAQ accordion, and use-case tabs are plain <script> blocks inside their own section file, so they travel with it automatically.

Two Things That Catch People Out

1. Cascade layers. If your project has unlayered CSS — even something as ordinary as ul { padding-left: 40px } — it will silently override every Tailwind utility, no matter the specificity, because layered rules always win over unlayered ones. Import older stylesheets into a layer: @import './legacy.css' layer(reset);
2. Breakpoints. Section-level card grids switch at lg (1024px) rather than md, because three or four columns are too cramped on a 768px tablet; two-column splits still switch at sm or md where they comfortably fit. Keep that in mind when mixing these sections with components that go multi-column at md.

Build and Deployment

Local Development

1. Install dependencies: npm install — requires Node.js 22.12 or newer.
2. Start the dev server: npm run dev, then open http://localhost:4321. Edits hot-reload as you save.
3. Build for production: npm run build. Output goes to dist/, and the build surfaces any TypeScript error in your data files.
4. Preview the build: npm run preview serves dist/ exactly as it will be deployed.

Deploying

This is a fully static site, so any static host works. Point your host at:

• Build command: npm run build
• Output directory: dist

Netlify, Vercel, Cloudflare Pages, and GitHub Pages all detect Astro automatically. Before your first deploy, set the site value in astro.config.mjs to your real domain so the sitemap and canonical URLs are correct.

Adding a New Page

Create a .astro file in src/pages/ — the filename becomes the route. Import BaseLayout, Header, and Footer, then compose the sections you need. Follow an existing page such as contact.astro as your starting point.

Troubleshooting

• Missing image? Content images are imported from src/assets/images/, not linked by URL — check the import path at the top of the component. For favicons, videos, and fonts, confirm the URL matches the folder under public/ (/images/…, /videos/…, /fonts/…).
• Style not applying? Remember that styles inside a component's <style> block are scoped. Shared rules belong in src/styles/tokens.css — and any element-level defaults you add there must go inside its @layer base block. An unlayered rule such as h2 { color: … } would beat every Tailwind text-colour utility, no matter how specific the class.
• Build failing? Read the error path — it almost always points at a mistyped field in a src/data/ file.