Section data

Half the marketing sections in every theme are data-driven: they pull their headings, lists, images, and CTAs from a named block in siteConfig. You don’t edit the component — you edit the data.

This page is a tour of every data-driven section so you can find the block you need.

The pattern

Each section’s data lives under a key matching the component name:

src/config/site.ts

team:       { heading, subtext, members: [...] },
timeline:   { heading, subtext, items:   [...] },
comparison: { heading, subtext, features:[...], columns: [...] },
gallery:    { heading, subtext, images:  [...] },
carousel:   { eyebrow, heading, subtext, slides: [...] },
tabs:       { heading, subtext, items:   [...] },
appDownload:{ heading, subtext, appStoreUrl, playStoreUrl },
map:        { heading, subtext, embedUrl, address, phone, email },
video:      { heading, subtext, provider, videoId },

If a key is missing, the corresponding section either falls back to its built-in defaults or hides itself — depends on the component.

Team

team: {
  heading: "Meet our team",
  subtext: "The people building the future of project management.",
  members: [
    { name: "Alex Rivera", role: "CEO & Co-founder", initials: "AR",
      image: "/team/alex.jpg",
      bio: "Previously VP Engineering at Stripe. 12 years building developer tools." },
    // …
  ],
}

• image: optional. If omitted, the component renders the initials inside a circle.
• bio: optional. Some themes hide it on smaller cards.

Timeline

timeline: {
  heading: "Our journey",
  subtext: "Key milestones that shaped who we are today.",
  items: [
    { year: "2023", title: "Founded",       description: "Started with a simple idea…" },
    { year: "2024", title: "Public Beta",   description: "Launched to 2,000 beta users." },
    { year: "2025", title: "10K Teams",     description: "Crossed 10,000 active teams." },
  ],
}

Add as many items as you want — most themes alternate left/right alignment automatically. year can be any short string ("Q1", "v2.0", etc.).

Comparison

comparison: {
  heading: "How Aurora compares",
  subtext: "See why teams choose Aurora over the competition.",
  features: [
    { name: "Real-time collaboration", aurora: true, competitorA: true,  competitorB: false },
    { name: "Built-in analytics",      aurora: true, competitorA: false, competitorB: false },
    // …
  ],
  columns: ["Aurora", "Competitor A", "Competitor B"],
}

The column keys (aurora, competitorA, competitorB) are arbitrary — rename them if you want, just keep them consistent between columns and features. Boolean values become a checkmark or dash; strings (like "Up to 5") render verbatim.

Gallery

gallery: {
  heading: "Built for every workflow",
  subtext: "See Aurora in action across different teams and use cases.",
  images: [
    { src: "/gallery/1.jpg", alt: "Dashboard overview" },
    { src: "/gallery/2.jpg", alt: "Team collaboration" },
    // …
  ],
}

src can be a local path (place files in public/gallery/) or a full URL (e.g. Unsplash hotlinks).

Carousel

carousel: {
  eyebrow: "Carousel",
  heading: "A closer look at Aurora",
  subtext: "Showcase product screens, customer stories, launches.",
  slides: [
    { image: "https://images.unsplash.com/…",
      title: "Planning workspace",
      description: "A calm overview for launches and campaigns.",
      alt: "Team planning workspace" },
    // …
  ],
}

Aurora ships with Splide.js for carousels; some themes use a CSS-only variant. The data shape is the same.

Tabs

tabs: {
  heading: "One platform, every workflow",
  subtext: "Aurora adapts to how your team works.",
  items: [
    { label: "Projects",  title: "Manage projects with clarity",
      description: "Kanban boards, Gantt charts, and list views…",
      icon: "grid" },
    { label: "Analytics", title: "Insights that drive decisions",
      description: "Track velocity, bottlenecks, and team capacity…",
      icon: "gauge" },
  ],
}

icon must match a key in src/components/Icon.astro — look there for the list. Add a new icon if yours isn’t there.

App Download

appDownload: {
  heading: "Take Aurora everywhere",
  subtext: "Available on iOS, Android, and desktop. Sync across all your devices.",
  appStoreUrl: "https://apps.apple.com/…",
  playStoreUrl: "https://play.google.com/…",
}

Set either URL to an empty string "" to hide just that store button.

Map

map: {
  heading: "Visit our office",
  subtext: "We'd love to meet you in person.",
  embedUrl: "https://www.google.com/maps/embed?pb=…",
  address:  "123 Innovation Drive, San Francisco, CA 94107",
  phone:    "+1 (555) 123-4567",
  email:    "hello@aurora.app",
}

Get the embedUrl from Google Maps → Share → Embed a map → Copy the src URL from the iframe.

Video

video: {
  heading: "See Aurora in action",
  subtext: "Watch how teams use Aurora to ship faster.",
  provider: "youtube" as "youtube" | "vimeo",
  videoId: "dQw4w9WgXcQ",
}

The videoId is the part after ?v= (YouTube) or after vimeo.com/ (Vimeo). Themes embed the right player based on provider.

Sections that aren’t data-driven

Some sections (Hero, FAQ, Pricing, Features, Testimonials, LogoCloud, CTA) hardcode their content directly in the component because the visual variation between themes is too high to share data. To edit them, open src/components/<Section>.astro and change the JSX. They’re plain Astro — no template logic, no surprises.

If you want to convert one of these to be data-driven, see Customize → New sections for the pattern.

What’s next

• Pages — combine these sections into new routes.
• New sections — build a fully new section that follows the same data pattern.