Customize Pages and Sections

Update page content

Open any page in src/pages/ and edit the props passed to sections.

Example:

<FeaturesSection
  shortTitle="Our Feature"
  title="Explore Our Core Features"
  description="..."
/>

Where section data lives

Sections are prop-driven. Each section declares sensible defaults in its frontmatter (const { title = '…', items = […] } = Astro.props), and a page overrides them by passing props. To change a section’s content you either edit the props on the page, or edit the component’s defaults.

Larger content datasets live in one place under src/config/ instead of being buried in (or copy-pasted across) components:

• Gallery images/tabs → src/config/gallery.ts (galleryTabs). Both the home and gallery pages render from this single source.
• Section content (pricing plans, FAQ, testimonials, features, how-it-works, statistics, company logos, feature-hero fun facts) → src/config/sections/*.ts. Each section imports its default content from there.

To change pricing, edit src/config/sections/pricing.ts; to change testimonials, edit src/config/sections/testimonials.ts; and so on. When you find data hard-coded in a component, prefer moving it into src/config/ and importing it.

Replace images

Content images live in src/assets/images and are rendered with the <Img> wrapper (src/components/common/Img.astro). To swap an image, drop a new file into src/assets/images and reference it by name (or by an /assets/images/<name> path) — the wrapper resolves it automatically.

<Img src="/assets/images/my-photo.webp" alt="…" class="…" loading="lazy" />

How images are optimized (no config needed)

<Img> routes every raster image through Astro’s <Image> / sharp, so each one is automatically:

• resized and served as a responsive srcset,
• converted to modern formats (WebP/AVIF),
• content-hashed for long-term caching, and
• given correct width/height so the layout never shifts while it loads (no CLS).

You never set dimensions by hand. Optional props: sizes (defaults to 100vw) and widths to fine-tune the srcset for a specific layout.

SVG icons and a few assets that must stay public (the CSS background in the CTA, the social og-image) live in public/assets/images; <Img> serves those as-is.

Reorder sections

Simply move section components inside the page to change the layout order.