## Reference images

Study these alongside the description below: hierarchy, rhythm, spacing, colour. Build for the product you are asked about, using this design language.

- Component: https://kage-design-assets.t3.tigrisfiles.io/components/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073741-11.webp
- Full page it was cut from: https://kage-design-assets.t3.tigrisfiles.io/screenshots/turso-tech/a01fe972-4603-42df-a7fd-1b66e57f2913-1789073707-full.webp
- Component on Kage: https://kage.design/component/turso-cta

# Before you start
Ask me what my product is, who it is for, and what its brand personality, colours, and primary community or conversion goals are. Then apply the principles below to create an original version for my product—not a copy of the reference.

## Build this section
Create a dark, high-contrast community or contribution CTA section for the product. The section should invite users into a broader ecosystem, then present two complementary paths—such as contributing and joining a community, or learning and getting support. Use realistic copy based on my product rather than placeholder text.

## Design language and reusable rules

### Layout and alignment
- Use a full-width near-black section, approximately `#0d1014` or `#0f1115`, with a subtle horizontal divider where the section transitions from adjacent content.
- Begin with a centered intro block: a short, bold headline followed by a restrained one- or two-line supporting paragraph. Keep the intro width around 620–700px and give it generous bottom spacing.
- Below the intro, place two equal-width cards in a responsive two-column grid. Keep the cards aligned at the top and make their heights equal on desktop.
- Use a centered max-width container around 1120–1200px with 32–56px horizontal padding. Collapse to one column on smaller screens.
- Each card has a large upper content area and a lower two-by-two feature grid. The lower grid should be visually connected to the card but separated by a thin horizontal rule.
- Give the main card content consistent internal padding of roughly 36–40px; use 28–32px on mobile.
- Make the card actions prominent and easy to scan. The upper content should have enough vertical space that the cards feel substantial, not like compact link tiles.

### Typography hierarchy
- Use a modern sans-serif with a clean, slightly technical feel.
- Intro headline: approximately 36–40px, weight 700–800, tight line-height around 1.05.
- Card titles: approximately 36px on desktop, weight 700–800, with tight line-height.
- Supporting text: 15–16px, line-height around 1.55, using a muted grey such as `#8c9098`.
- Small category pills should be uppercase or compact title case, 11–12px, semibold, with slight letter spacing.
- Feature titles should be 15–16px, semibold; feature descriptions should be 14–15px with relaxed line-height.
- Maintain a clear contrast between the white heading colour, approximately `#f5f7f8`, and secondary copy.

### Colour and accents
- Keep the overall palette restrained: near-black background, off-white text, muted grey copy, and thin charcoal rules around `#252b30`.
- Give each card its own accent family. One can use a vivid violet/magenta around `#d946ef` or `#c83ee8`; the other can use mint/cyan around `#45e6c0`.
- Use the accent for the card border, category pill, primary button, and feature icons. Keep the accents bright but avoid filling large surfaces with them.
- Primary buttons should use a solid accent fill with dark text, generous horizontal padding, a pill radius, and a subtle hover lift or brightness change.
- Ensure accessible contrast for all text and controls; do not rely on colour alone to distinguish actions.

### Borders, radius, and surfaces
- Use a 1px border with the card’s accent colour at moderate opacity, approximately 70–90%. The border should be visible against the dark background without looking neon-heavy.
- Use a medium rounded corner, approximately 14–18px, for the outer cards.
- Divide feature cells with 1px charcoal borders. Avoid excessive shadows; the dark surface and accent outline provide the hierarchy.
- Feature cells should have balanced padding, approximately 26–30px, and preserve a consistent minimum height.
- Keep the card interior the same or only subtly different from the page background so the borders and grid structure do most of the visual work.
- Category pills should be compact, filled with the relevant accent, and fully rounded.

### Content and interaction
- Each card needs: a category pill, a large title, a concise explanation, and one clear primary button or link.
- Add four supporting feature cells per card. Each cell should include a small line icon, a short benefit-oriented title, and one or two lines of explanatory copy.
- Use simple outline icons that match the card accent; use an icon library if available, but keep icon weight and size consistent.
- Make the entire button area keyboard accessible with visible focus states. Links should have descriptive labels and sensible external-link behaviour where applicable.
- On hover, slightly brighten the button and optionally raise or brighten the relevant card border. Keep motion subtle and respect `prefers-reduced-motion`.
- On mobile, stack the cards and let each feature grid remain two columns only if the content remains readable; otherwise switch feature cells to a single column.

## Never
- Never copy the reference’s logos, product names, brand identity, exact wording, or proprietary claims.
- Never reuse the reference’s illustrations, imagery, icon artwork, or decorative assets; use neutral icons or create an original treatment.
- Never reproduce the exact card copy, labels, button text, layout dimensions, or accent colours if they conflict with my product’s brand.
- Never make the section depend on inaccessible colour-only cues, tiny text, low-contrast borders, or hover-only functionality.
- Never turn every element into a glowing gradient, heavy shadow, or oversized marketing flourish; preserve the calm, structured dark interface.