SideButton Marketing Website Knowledge Pack Files

What This Is

Six static legal pages sharing the same Astro Layout with Header and Footer. All follow an identical layout: centered prose content (max-w-3xl) under an H1 heading with a "Last updated" or subtitle line. Content is pure text with H2/H3 subsections, tables, lists, and mailto/external links. No interactive elements beyond navigation and standard anchor links. Pages cover privacy, terms, content policy, DMCA, trademarks, and imprint.

URL Patterns

Pattern	Description
/privacy	Privacy Policy -- GDPR-compliant, 10 sections
/terms	Terms of Service -- Apache-2.0 license terms, 13 sections
/content-policy	Content Policy -- marketplace guidelines, 8 sections
/dmca	DMCA Policy -- copyright takedown procedures, 9 sections
/trademarks	Trademark Notice -- 30 third-party attributions, 5 sections
/imprint	Imprint (Impressum) -- German legal notice, 7 sections

Page Structure

+--[Header: sticky banner]---------------------------+
|                                                     |
|  [main.py-16.md:py-24]                             |
|    [.max-w-3xl.mx-auto.px-4.sm:px-6.lg:px-8]      |
|                                                     |
|      H1: page title (text-3xl md:text-4xl)          |
|      P.text-text-muted.mb-12: subtitle/date         |
|                                                     |
|      [.prose-content]                               |
|        H2 numbered sections                         |
|        Prose: paragraphs, lists, tables, links      |
|        Optional: callout boxes, summary grids       |
|                                                     |
+--[Footer: 6-column grid]---------------------------+

All 6 pages share this exact layout -- only the <title>, H1, subtitle, and .prose-content body differ.

Key Elements

Shared Layout Elements

Element	Selector	Notes
Main content area	main.py-16.md\\:py-24	Vertical padding 4rem / 6rem at md breakpoint
Content container	.max-w-3xl.mx-auto	Max width 48rem (768px), centered
Page heading	h1	text-3xl md:text-4xl font-bold mb-2
Subtitle/date line	h1 + p.text-text-muted	"Last updated: ..." or descriptive subtitle
Prose body	.prose-content	Contains all section content
Section headings	.prose-content h2	Numbered sections (e.g., "1. Data Controller")
Subsection headings	.prose-content h3	Used in privacy, terms, content-policy
Contact email	a[href="mailto:[email protected]"]	Present on privacy, terms, imprint
Legal email	a[href="mailto:[email protected]"]	Present on content-policy, dmca

Per-Page Specifics

Page	H1	Subtitle	Sections	Special Elements
/privacy	"Privacy Policy"	"Last updated: December 2025"	10	Privacy-first callout box (green check icon), data collection table, data retention table, cookies table, summary grid (4 green check items)
/terms	"Terms of Service"	"Last updated: January 2026"	13	Internal links to /content-policy and /dmca, EU ODR link
/content-policy	"Content Policy"	"Last updated: January 2026"	8	Enforcement action table (5 rows), report email [email protected]
/dmca	"DMCA Policy"	"Last updated: January 2026"	9	Agent contact callout box (bg-slate-50), ordered list for notice requirements
/trademarks	"Trademark Notice"	"Third-party trademark attributions"	5	Trademark table with 30 rows (trademark + owner columns)
/imprint	"Imprint"	"Legal Notice (Impressum)"	7	German law reference (RStV), EU ODR link

Privacy Page Key Elements

Element	Selector	Notes
Privacy-first callout	.prose-content > div:first-child	Light blue bg, green check icon, "Privacy First" heading
Data collection table	.prose-content table:nth-of-type(1)	3 columns: Data, Purpose, Legal Basis
Data retention table	.prose-content table:nth-of-type(2)	2 columns: Data, Retention Period
Cookies table	.prose-content table:nth-of-type(3)	3 columns: Name, Purpose, Duration
Summary grid	.prose-content > div:last-child	2x2 grid with green checkmarks: "100% local execution", "No telemetry or tracking", "Your data stays on your machine", "We never sell your data"
Google Privacy link	a[href="https://policies.google.com/privacy"]	Appears twice (Google Fonts + Google Forms)
jsDelivr Privacy link	a[href*="jsdelivr.com"]	jsDelivr CDN privacy policy
EDPB link	a[href*="edpb.europa.eu"]	EU data protection authorities list
GitHub link	a[href="https://github.com/sidebutton/sidebutton"]	In contact section

Terms Page Key Elements

Element	Selector	Notes
Content Policy link	a[href="/content-policy"]	Appears 2 times (section 6 and 6 subsection)
DMCA Policy link	a[href="/dmca"]	Appears 2 times (section 7 subsections)
EU ODR link	a[href="https://ec.europa.eu/consumers/odr/"]	Online dispute resolution platform

Content Policy Key Elements

Element	Selector	Notes
Enforcement table	.prose-content table	2 columns: Violation Type, Action; 5 rows from warning to permanent ban
Report email	a[href="mailto:[email protected]"]	Appears in sections 4 and 6

DMCA Page Key Elements

Element	Selector	Notes
Agent contact box	.bg-slate-50.border.border-slate-200.rounded-lg.p-4	Styled callout with "SideButton Legal", email, subject line
Notice requirements	.prose-content ol:first-of-type	6 ordered items per 17 U.S.C. 512(c)(3)
Counter-notice list	.prose-content ol:nth-of-type(2)	4 ordered items
Content Policy link	a[href="/content-policy"]	In section 8

Trademarks Page Key Elements

Element	Selector	Notes
Trademark table	.prose-content table	2 columns: Trademark, Owner; 30 rows
Table wrapper	.overflow-x-auto	Horizontal scroll on narrow viewports

Imprint Page Key Elements

Element	Selector	Notes
EU ODR link	a[href="https://ec.europa.eu/consumers/odr/"]	Online dispute resolution platform
Site URL	a[href="https://sidebutton.com"]	In contact section

Data Model

Static prose content -- no editable entities or form fields on any legal page.

Privacy Policy Data Points

Data Item	Value	Section
Data Controller	SideButton, [email protected]	Section 1
Software data collection	None -- all local	Section 2.1
Website data: waitlist email	Consent (Art. 6(1)(a) GDPR)	Section 2.2
Website data: IP (fonts)	Consent (Art. 6(1)(a) GDPR)	Section 2.2
Third-party: Google Fonts	fonts.googleapis.com	Section 2.3
Third-party: jsDelivr CDN	cdn.jsdelivr.net	Section 2.3
Third-party: Google Forms	Waitlist collection	Section 2.3
Waitlist email retention	Until launch (1-2 months)	Section 4
Cookie consent storage	sidebutton_cookie_consent in localStorage	Section 7
Children age limit	Under 16	Section 8
GDPR rights	Articles 15-21 + withdrawal (Art. 7(3))	Section 5

Terms of Service Key Provisions

Provision	Summary	Section
License	Apache-2.0	Section 4
Marketplace	Publisher license grant, content removal rights	Section 6
DMCA	Repeat infringers terminated	Section 7
Warranty	"AS IS", no warranty	Section 8
Governing law	EU law, consumer-friendly jurisdiction	Section 10
ODR	EU online dispute resolution link provided	Section 11

Content Policy Enforcement Tiers

Violation	Action
Minor policy violation	Warning + request to fix
Repeated minor violations	Content removal
Serious policy violation	Immediate content removal
Malicious content	Immediate removal + account suspension
Repeat serious offenses	Permanent account ban

DMCA Response Times

Action	Timeframe
Acknowledgment	Within 24 hours
Content removal	Within 48 hours
Counter-notification processing	10-14 business days

Trademark Attributions (30 entries)

Trademark	Owner
Gmail, Google Docs, Google Sheets, Google Workspace	Google LLC
Microsoft Teams, Outlook, Microsoft 365	Microsoft Corporation
LinkedIn	LinkedIn Corporation (Microsoft)
Slack	Slack Technologies, LLC (Salesforce)
Salesforce	Salesforce, Inc.
HubSpot	HubSpot, Inc.
Jira, Confluence, Trello	Atlassian Pty Ltd
Zendesk	Zendesk, Inc.
Freshdesk	Freshworks Inc.
Intercom	Intercom, Inc.
ServiceNow	ServiceNow, Inc.
Pipedrive	Pipedrive Inc.
Zoho CRM	Zoho Corporation
Linear	Linear Orbit, Inc.
Asana	Asana, Inc.
Monday.com	monday.com Ltd.
ClickUp	ClickUp Inc.
Notion	Notion Labs, Inc.
GitHub	GitHub, Inc. (Microsoft)
Jenkins	Jenkins project (Linux Foundation)
QuickBooks	Intuit Inc.
Xero	Xero Limited
Stripe	Stripe, Inc.
PayPal	PayPal Holdings, Inc.
Wave	Wave Financial Inc.
BambooHR	BambooHR LLC
Workday	Workday, Inc.
Greenhouse	Greenhouse Software, Inc.
Indeed	Indeed, Inc. (Recruit Holdings)
Buffer	Buffer, Inc.

States & Variations

State	Trigger	Visual Indicator
Default	Page load	Full prose content visible, Header sticky at top
Cookie dialog	First visit (no sidebutton_cookie_consent)	Cookie Notice overlay with Accept/Reject buttons
SideButton FAB	Extension installed	Green "S" + "Click" button bottom-right

Responsive Behavior

Breakpoint	Behavior
Mobile (<640px)	py-16 (4rem top/bottom), px-4 content padding, H1 text-3xl, tables may overflow
Tablet (640-768px)	sm:px-6 content padding
Desktop (768px+)	md:py-24 (6rem), lg:px-8 padding, H1 text-4xl, max-w-3xl centered

Page Variations

Variation	Pages	Distinguishing Feature
Numbered H2 sections	privacy, terms, content-policy, dmca	Sections prefixed "1.", "2.", etc.
Named H2 sections	trademarks, imprint	Section headings without numbers
Has inline tables	privacy (3), content-policy (1), trademarks (1)	Data displayed in HTML tables
Has ordered lists	dmca (2)	Numbered legal requirements
Has callout boxes	privacy (2: privacy-first + summary), dmca (1: agent contact)	Styled div with background color
Has internal cross-links	terms (→ content-policy, dmca), dmca (→ content-policy)	<a href="/..."> to sibling legal pages
Has external links	privacy (Google, jsDelivr, EDPB, GitHub), terms (EU ODR), imprint (EU ODR)	target="_blank" rel="noopener noreferrer"
Contact email	privacy, terms, imprint: [email protected]; content-policy, dmca: [email protected]	Different addresses per page type

Common Tasks

1. Navigate between all legal pages

1. Navigate to /privacy
2. Verify H1 reads "Privacy Policy"
3. Navigate to /terms -- verify H1 reads "Terms of Service"
4. Navigate to /content-policy -- verify H1 reads "Content Policy"
5. Navigate to /dmca -- verify H1 reads "DMCA Policy"
6. Navigate to /trademarks -- verify H1 reads "Trademark Notice"
7. Navigate to /imprint -- verify H1 reads "Imprint"

2. Verify all sections render on Privacy page

1. Navigate to /privacy
2. Verify 10 H2 headings exist: "1. Data Controller" through "10. Contact"
3. Verify privacy-first callout box is visible at top of prose
4. Verify 3 tables render (data collection, retention, cookies)
5. Verify summary grid at bottom shows 4 green checkmarks
6. Verify all mailto:[email protected] links are functional

3. Verify internal cross-links on Terms page

1. Navigate to /terms
2. Find links to /content-policy (section 6)
3. Click first /content-policy link -- verify navigation to Content Policy page
4. Go back to /terms
5. Find links to /dmca (section 7)
6. Click first /dmca link -- verify navigation to DMCA Policy page

4. Verify DMCA notice requirements

1. Navigate to /dmca
2. Locate "3. Filing a DMCA Notice" section
3. Verify 6 ordered list items are present
4. Verify agent contact box shows "SideButton Legal" and [email protected]
5. Verify "4. Counter-Notification" section has 4 ordered items

5. Verify trademark table completeness

1. Navigate to /trademarks
2. Locate the trademark table
3. Count rows -- verify 30 trademark entries
4. Verify first entry: "Gmail, Google Docs, Google Sheets, Google Workspace" / "Google LLC"
5. Verify last entry: "Buffer" / "Buffer, Inc."

6. Verify Imprint legal requirements

1. Navigate to /imprint
2. Verify "Service Provider" section shows "SideButton"
3. Verify "Contact" section includes [email protected] and https://sidebutton.com
4. Verify "Responsible for Content" section references RStV
5. Verify "Dispute Resolution" section includes EU ODR link

Tips

• All 6 pages are statically rendered (default Astro prerendering) -- no SSR required, unlike /login
• The .prose-content class is a custom container, not Tailwind's @tailwindcss/typography prose plugin -- styles are applied via inline style attributes on tables and callout boxes
• Privacy page tables use inline style attributes for all formatting (padding, borders, widths) -- not Tailwind classes
• Content Policy and Trademarks tables use Tailwind utility classes (w-full, text-sm, py-2, border-b)
• Two different contact email addresses are used: [email protected] for general pages (privacy, terms, imprint) and [email protected] for enforcement pages (content-policy, dmca)
• The Trademarks page has .overflow-x-auto on the table wrapper to handle horizontal overflow on mobile
• All external links use target="_blank" rel="noopener noreferrer" for security
• The Privacy summary grid uses a 2-column CSS grid layout that remains 2 columns on all viewport sizes

Gotchas

• Inconsistent table styling: Privacy page tables use inline style attributes while Content Policy and Trademarks tables use Tailwind classes -- selectors must account for both approaches
• Trademarks subtitle is not a date: Unlike all other legal pages that show "Last updated: Month Year", the Trademarks page subtitle reads "Third-party trademark attributions" and the Imprint reads "Legal Notice (Impressum)" -- do not assume all subtitles follow the date pattern
• Privacy page has two callout boxes: The privacy-first box at the top and the summary grid at the bottom are both styled div elements inside .prose-content -- they are not semantic HTML elements like aside or section
• Cross-links only go one direction: Terms links to content-policy and dmca, and dmca links to content-policy, but none of these pages link back to terms -- navigation between legal pages requires direct URL access or the Footer
• No table of contents: None of the legal pages have anchor links or a table of contents for their numbered sections -- the only way to reach a specific section is scrolling
• Content-policy enforcement table uses Tailwind classes: The enforcement table in Content Policy has no inline styles and uses .w-full.my-4.text-sm with .border-b.border-slate-200 on rows -- different from Privacy page tables that use inline style attributes